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获取URL中的参数数据
Dec 05 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
express启用https使用小记
May 21 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
node.js基础知识汇总
2020/08/25 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python分布式计算dispy的使用详解
2019/12/22 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
欢迎领导检查标语
2014/06/27 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
初中班干部工作总结
2015/08/10 职场文书
初中体育课教学反思
2016/02/16 职场文书