关闭

级联下拉列表

156人阅读 评论(0) 收藏 举报
分类:
<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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:27585次
    • 积分:531
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:25篇
    • 译文:0篇
    • 评论:3条
    最新评论