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翻页效果
Jul 23 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
Bootstrap4 gulp 配置详解
Jan 06 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
基于mysql的论坛(4)
2006/10/09 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
Prototype Class对象学习
2009/07/19 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
经典婚礼主持开场白
2014/03/13 职场文书
法院授权委托书范文
2014/08/02 职场文书
承诺书模板
2014/08/30 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python