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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
Angular排序实例详解
Jun 28 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
第三节 定义一个类 [3]
2006/10/09 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php类的定义与继承用法实例
2015/07/07 PHP
php实现三级级联下拉框
2016/04/17 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
详解VUE调用本地json的使用方法
2019/05/15 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
Python常用内置函数总结
2015/02/08 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python实现按长宽比缩放图片
2018/06/07 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
第一书记观后感
2015/06/08 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js