如何制作动态选择框？

Question

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

<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>

Answer 1

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

您希望根据第一个选择填充辅助选择。您可以使用jquery更改事件执行此操作。

http://api.jquery.com/change/

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

高级解释如下：

<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库 这也是相当低效的，但在这样一个悬而未决的问题中，这些改进需要很长时间才能解释。