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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 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设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python卸载模块的方法汇总
2016/06/07 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python中的集合介绍
2019/01/28 Python
Python将字典转换为XML的方法
2020/08/01 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
几个判断型的面试题
2012/07/03 面试题
高三政治教学反思
2014/02/06 职场文书
物流业务员岗位职责
2015/04/03 职场文书
安全教育第一课观后感
2015/06/17 职场文书
话题作文之呼唤
2019/12/18 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技