Javascript写的级联选择框

最新推荐文章于 2025-06-24 12:57:38 发布

flying_huang

最新推荐文章于 2025-06-24 12:57:38 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发文章标签： javascript classification class function

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/flying_huang/article/details/1522537

WEB开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用 JavaScript 实现的下拉选择器，能够根据所选的班级动态更新分类选项。此选择器适用于学校管理系统等场景，能够帮助用户快速定位到所需分类。

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

<head>

<title></title>

<script type="text/javascript">

var classification_names = [["一年一班","一年二班"],["二年一班"],["三年一班"],["四年一班"]];

var classificaiton_ids = [[1,2],[3],[4],[5]];

function class_onchange() {

//删除前面所有分类

var classifications = document.getElementById("classifications");

var count=classifications.options.length;

var delCount = 0 ;

while(delCount < count) {

classifications.options.remove(i);

delCount++;

}

//获得所选班级id

var classid=document.getElementById("class").value;

//获得id班级所有分类名

var thisClassifcationNames=classification_names[classid];

if(!thisClassifcationNames) {

return;

}

//获得id班级所有分类id

var thisClassifcationIds=classificaiton_ids[classid];

if(!thisClassifcationIds) {

return;

}

//设置该班级分类选项

var nullOption = document.createElement("option");

nullOption.text="--请选择分类--";

nullOption.value="";

classifications.options.add(nullOption);

classifications.value="";

for(var i=0;i<thisClassifcationNames.length;i++){

var option = document.createElement("option");

option.text=thisClassifcationNames[i];

option.value=thisClassifcationIds[i];

classifications.options.add(option);

}

}

</script>

</head>

<body>

班级

<select id="class" name="class" onchange="return class_onchange()" >

<option value="-1" selected="selected">请选择年级</option>

<option value="0">一年级</option>

<option value="1">二年级</option>

<option value="2">三年级</option>

<option value="3">四年级</option>

</select>

分类

<select id="classifications" name="classifications">

<option value="-1" selected="selected">请选择班级</option>

</select>

</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。