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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 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高级OOP技术演示
2009/08/27 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
解决laravel session失效的问题
2019/10/14 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
ES6概念 Symbol toString()方法
2016/12/25 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python while 循环使用的简单实例
2016/06/08 Python
查看django版本的方法分享
2018/05/14 Python
Python交互环境下实现输入代码
2018/06/22 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python可视化实现KNN算法
2019/10/16 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python接口开发实现步骤详解
2020/04/26 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
学校社会实践活动总结
2014/07/03 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
珠宝的促销活动方案
2014/08/31 职场文书