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关闭本窗口技巧小结
Sep 05 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python 变量初始化空列表的例子
2019/11/28 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
精彩广告词大全
2014/03/19 职场文书
学校文明单位申报材料
2014/05/06 职场文书
项目建议书范文
2014/05/12 职场文书
政治学求职信
2014/06/03 职场文书
工厂车间标语
2014/06/19 职场文书
教师节简报
2015/07/20 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers