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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
理解javascript回调函数
Dec 28 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
AngularJS表单基本操作
Jan 09 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript 事件绑定及深入
2015/04/13 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python简单实现区域生长方式
2020/01/16 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
银行贷款承诺书
2014/03/29 职场文书
网络技术专业求职信
2014/05/02 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
评职称个人总结
2015/03/05 职场文书
单身证明范本
2015/06/15 职场文书
党课主持词大全
2015/06/30 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android