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 css样式操作代码(批量操作)
Oct 09 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
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简单实现MVC
2015/02/05 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
Bootstrap插件全集
2016/07/18 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python NumPy库安装使用笔记
2015/05/18 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python中模块的__all__属性详解
2017/10/26 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
一道SQL面试题
2012/12/31 面试题
少先队学雷锋活动月总结
2014/03/09 职场文书
社会实践活动总结报告
2014/04/29 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
新教师培训方案
2014/06/08 职场文书
欢迎词范文
2015/01/27 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
小学班主任培训心得体会
2016/01/07 职场文书