级联下拉列表

原创 2015年07月07日 20:57:05
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form name="course">
<select name="chapter">
<option>请选择章目录</option>
</select>
<select name="section">
<option>请选择接目录</option>
</select>
<form>
</body>
<script>
var chapters=[
{text:'1.DOM基础',value:'1'},
{text:'2.事件模型',value:'2'}
];
var sections={
1:[
{text:'1.1 文档树',value:'1.1'},
{text:'1.2 节点操作',value:'1.2'},
{text:'1.3 元素遍历',value:'1.3'},
{text:'1.4 样式操作',value:'1.4'},
{text:'1.5 属性操作',value:'1.5'},
{text:'1.6 表单操作',value:'1.6'}

],
2:[
{text:'2.1 事件类型', value:'2.1'},
{text:'2.2 事件模型',value:'2.2'},
{text:'2.3 事件应用',value:'2.3'},
]
};
var course= document.forms.course;
function fillSelect(select,list){
for(var i=select.length-1;i>0;i--){
select.remove(i);
}
list.forEach(function(data){
var option=new Option(data.text,data.value);
select.add(option);
});
}
fillSelect(course.chapter,chapters);
course.chapter.addEventListener(
'change',function(event){
var value=event.target.value,
list=sections[value]||[];
fillSelect(course.section,list);
}
);
</script>
</html>

ajax实现下拉列表级联

  • 2012年05月13日 14:50
  • 4.2MB
  • 下载

select下拉列表级联

1、        v1  v2  v3  v4  v1  v2  v3  v4   注意:fireFox需要将name换成id。 2、 test...

Ext的异步请求(二级级联动态加载下拉列表)

Ext的异步请求(二级级联动态加载下拉列表)

js级联下拉列表(日历控件)

  • 2008年12月18日 15:38
  • 3KB
  • 下载

Struts2.2配置json+ajax实现三级联(任意级联)下拉列表框。

前言:折腾了两天终于实现了ajax的局部刷新,级联下拉列表框。
  • ahhmdwg
  • ahhmdwg
  • 2014年11月22日 10:01
  • 1987

省市县下拉列列表框级联

  • 2010年11月08日 16:19
  • 155KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:级联下拉列表
举报原因:
原因补充:

(最多只允许输入30个字)