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代码
Nov 09 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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
一个程序下载的管理程序(二)
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php eval函数一句话木马代码
2015/05/21 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
vue 之 css module的使用方法
2018/12/04 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python金融数据可视化汇总
2017/11/17 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
档案保密承诺书
2014/06/03 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
矛盾论读书笔记
2015/06/29 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python