HTML5 根据一级下拉列表的选中项动态改变2级下拉列表的选项

最新推荐文章于 2023-03-06 12:04:42 发布

原创最新推荐文章于 2023-03-06 12:04:42 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 select标签使用

这段代码展示了如何根据HTML5中的select标签的一级下拉列表选中项，动态更新二级下拉列表的内容。通过创建并添加新的option元素，实现不同选项对应不同内容的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>

<style>
</style>
<script>
function tes1(){
var a1=new Array("冰箱","彩电","洗衣机");//新建三个数组，用来更改二级下拉列表内容
var a2=new Array("苹果","三星","小米");
var a3=new Array("巧克力","鱼豆腐","饼干","薯片");
var main=document.getElementById("main");
var next=document.getElementById("next");
var value1=main.selectedIndex;//获取一级下拉列表选中的节点来改变二级下拉列表的内容
switch(value1)
{
case 0:var c=next.length;//提前获取select的length属性
for(var i=0;i<c;i++){
next.remove(0);//每次删除一个节点之后，剩下的所有节点的下标都会比原来减一，所以需要直接删除0下标节点length次
}
//next.innerHTML="";这样来清空标签之间的所有内容是最快捷的
for(var j=0;j<a1.length;j++){
var e=document.createElement("OPTION");//重新新建option节点来改变二级下拉列表的内容
e.innerHTML=a1[j];
next.add(e,null);
}
break;
case 1:
var c=next.length;
for(var i=0;i<c;i++){
next.remove(0);
}
for(var j=0;j<a2.length;j++){
var e=document.createElement("OPTION");
e.innerHTML=a2[j];
next.add(e,null);
}
break;
case 2:
var c=next.length;
for(var i=0;i<c;i++){
next.remove(0);
}
for(var j=0;j<a3.length;j++){
var e=document.createElement("OPTION");
e.innerHTML=a3[j];
next.add(e,null);
}
break;
default:break;
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<select id="main" onchange="tes1()">
<option value="dianqi">家用电器</option>
<option value="phone">手机数码</option>
<option value="snack">小吃零食</option>
</select>
<select id="next">
<option value="bingxiang">冰箱</option>
<option value="xiyiji">洗衣机</option>
<option value="caidian">彩电</option>
</select>
</body>
</html>