javascript 设置select内部项

最新推荐文章于 2023-04-14 09:46:09 发布

原创最新推荐文章于 2023-04-14 09:46:09 发布 · 448 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 同时被 2 个专栏收录

51 篇文章

订阅专栏

javascript

44 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态更改HTML中Select元素选项的方法。通过监听Select元素的变化事件，并结合switch-case语句，可以实现根据用户的选择动态加载不同的选项。

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

昨天做项需求，是动态改变select内部的option。最后做完发现根本不用这个玩意。于是尴尬了，毕竟学习了，所以还是记录下

弄个简单的例子，现在有两个选择器，a，b b的子项要根据a的内容来确定，于是就有了下面的代码：

第一步，先要用id来建立关系：

document.getElementById("select1").onchange = function() {
               console.log(document.getElementById("select1").value);
               select1value = document.getElementById("select1").value;
               selecta = document.getElementById("select1");
               selectb = document.getElementById("select2");

第二步，用switch case来搞事情、:

switch(select1value) {
                   case '1':
                       console.log("到底什么鬼");
                        selectb.options.length = 0;
                       var a11 = document.createElement("option");
                       a11.text = '全棉布';
                       a11.value = '全棉布';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '净色棉';
                       a11.value = '净色棉';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '灯芯绒';
                       a11.value = '灯芯绒';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '帆布';
                       a11.value = '帆布';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '缎纹／贡缎';
                       a11.value = '缎纹／贡缎';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '棉竹节';
                       a11.value = '棉竹节';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '纱卡';
                       a11.value = '纱卡';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '平布';
                       a11.value = '平布';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '府绸';
                       a11.value = '府绸';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '斜纹';
                       a11.value = '斜纹';
                       selectb.add(a11);
                       var a11 = document.createElement("option");
                       a11.text = '其他棉类';
                       a11.value = '其他棉类';
                       selectb.add(a11);

                       break;