javascript级联下拉列表实例代码(自写)


Posted in Javascript onMay 10, 2013

Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作。
1,Select对象。
属性
a,selectedIndex:用户选择的选项的下标,下标从0开始
b,length: 获取或者设置选项的个数
c,options: 返回一个数组,数组元素是Option对象
2,Options对象
属性:
a,text:选项的文本内容
b,value:选项的??
c,selected: 当该选项被选上,值为true,否则为false
小知识:创建一个Option对象

var op=new Option(text,value);

我写的一个级联下拉列表:
javascript级联下拉列表实例代码(自写) 
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
#d1 { 
width: 400px; 
height: 250px; 
background-color: #FFE4B5; 
margin: 40px auto; 
} 
#d1_head { 
color: white; 
font-size: 20px; 
font-family: "Arial"; 
height: 24px; 
background-color: bule; 
} 
#d1_content { 
padding-left: 30px; 
padding-top: 30px; 
} 
</style> 
<script src="prototype-1.6.0.3.js"></script> 
<script type="text/javascript"> 
function doAction(index) { 
var arr = new Array; 
arr[0] = [ new Option('--研究方向--', '-1') ]; 
arr[1] = [ new Option('商务英语', 'english1'), 
new Option('英美文学', 'english2') ]; 
arr[2] = [ new Option('网格计算', 'computer1'), 
new Option('计算机软件', 'computer2'), 
new Option('图形计算', 'computer3') ]; 
$('s2').innerHTML = ''; 
for (i = 0; i < arr[index].length; i++) { 
$('s2').options[i] = arr[index][i]; 
} 
} 
</script> 
</head> 
<body style="font-size:30px;"> 
<div id="d1"> 
<div id="d1_head">专业选择</div> 
<div id="d1_content"> 
<form> 
<select naem="s1" id="s1" style="width:120px;" 
onchange="doAction(this.selectedIndex);"> 
<option value="-1">--专业--</option> 
<option value="english">--英语--</option> 
<option value="computer">--计算机--</option> 
</select> <select name="s2" id="s2" style="width:120px;"> 
<option value="-1">--研究方向--</option> 
</select> <input type="submit" value="确认" /> 
</form> 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js对象关系图 方便dom操作
Mar 18 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
实例浅析js的this
Dec 11 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
jquery ui对话框实例代码
May 10 #Javascript
javascrip关于继承的小例子
May 10 #Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 #Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 #Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 #Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 #Javascript
使用JavaScript 实现各种跨域的方法
May 08 #Javascript
You might like
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php array_walk() 数组函数
2011/07/12 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JS 判断代码全收集
2009/04/28 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
财务管理专业推荐信
2013/11/19 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
主持人大赛开场白
2015/05/29 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android