Javascript 如何创建动态选择框？

我这里有三个选择框。我怎么做这个

<select class="form-control input-lg">
              <option value="1">abcd</option>
              <option value="2">efgh</option>
              <option value="2">ijkl</option>
              <option value="2">mnop</option>
    </select>

    <select class="form-control input-lg">
              <option value="10">desk</option>
              <option value="20">pen</option>
              <option value="30">pc</option>
    </select>

    <select class="form-control input-lg">
              <option value="100"></option>
              <option value="200"></option>
              <option value="300"></option>
    </select>

---

从根本上说，这是一个事件驱动的问题

您希望基于第一个选择填充第二个选择。您可以通过jquery更改事件来实现这一点

在更改时，您启动一个回调函数来填充第二个选择框，从那里填充第三个选择框就是相同的概念

高层次的解释如下：

<select id="select1" class="form-control input-lg">
          <option value="1">abcd</option>
          <option value="2">efgh</option>
          <option value="2">ijkl</option>
          <option value="2">mnop</option>
</select>

<select id="select2" class="form-control input-lg">
</select>

<script>  
  $('#select1').change(function(){
    alert("Something has changed");
    // RUN SOME OTHER FUNCTION TO POPULATE THE SECOND SELECT BOX

    // Grab the dom element of the second select
    var select2 = $("#select2");

    // iterate your data, here an array with an element, and populate the select element
    $.each(['some data'], function() {
        select2.append($("<option />").val("Something").text("Something else"));
    });

  })
</script>

注意：为此，您显然必须在代码中包含JQuery库

---

这也是相当低效的，但是在这样一个开放的问题中，这些改进需要花费太长的时间来解释

您需要相互关联的选择框。。你试过什么？请简要描述你的问题。我不能理解你的问题。通常，你会使用ajax来解决这个问题。在选择1的基础上加载2的内容，在选择2的基础上加载3的内容我不太懂英语。我很抱歉。我不想要相互关联的选择框。示例：如果用户选择了笔。用户可以看到蓝色笔、黄色笔和红色笔。或者，如果用户选择了PC。用户将看到A PC、B PC和C PC。谢谢。这是工作。