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 相关文章推荐
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
用原生js做单页应用
Jan 17 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
Angular2数据绑定详解
Apr 18 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
Openlayers3实现车辆轨迹回放功能
Sep 29 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
PHP 字符串分割和比较
2009/10/06 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
Javascript的this用法
2017/01/16 Javascript
几种响应式文字详解
2017/05/19 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
我的祖国演讲稿
2014/05/04 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
七个Python必备的GUI库
2021/04/27 Python
golang switch语句的灵活写法介绍
2021/05/06 Golang