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 变量作用域分析
Jul 04 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
详解js的视频和音频采集
Aug 09 Javascript
详细分析React 表单与事件
Jul 08 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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下实现农历日历的代码
2007/03/07 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
Javascript的一种模块模式
2008/03/22 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
利用Python如何生成随机密码
2016/04/20 Python
python直接访问私有属性的简单方法
2016/07/25 Python
关于python多重赋值的小问题
2019/04/17 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
python如何设置静态变量
2020/09/07 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
应用化学专业职业生涯规划书
2014/01/22 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
合作投资意向书
2014/04/01 职场文书
爱心活动计划书
2014/04/26 职场文书
励志演讲稿范文
2014/04/29 职场文书
佛光寺导游词
2015/02/10 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
Redis+AOP+自定义注解实现限流
2022/06/28 Redis