您的位置：首页 > 其它

级联下拉列表

2015-07-07 20:57 197 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航