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 escape,unescape解决中文乱码问题的方法
May 26 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
js实现select下拉框选择
Jan 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与XML的PDF文档生成技术
2006/10/09 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python实现梯度下降算法
2020/03/24 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python笔记之观察者模式
2019/11/20 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
团日活动总结报告
2014/06/25 职场文书
写给女朋友的保证书
2015/05/09 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
java代码实现空间切割
2022/01/18 Java/Android