javascript - 从多选下拉列表中获取值

Question

我有一个两层的下拉菜单。我想从第二个下拉列表中选择的项目中获取选项值。

我已经弄清楚如何对第一个列表执行此操作，但我希望能够获取 -any- 列表的值。在我的 jsfiddle 中，当您单击“饼”列表中的任何项目时，您将在 console.log 中看到它们的值，但当单击“树”或“汽车”列表中的任何项目时，它们都没有值。

我以为我可以为所有选择列表提供相同的 ID，但显然不行。有什么建议么？我做了一些搜索，但没有找到我要找的东西。我已经在使用 D3 和 jQuery，所以这些都很好，但纯 JavaScript 也很好。谢谢!

jsfiddle is here .

    <div class="ccms_form_element cfdiv_custom" id="indSelectors">
        <label>Type:</label>
        <select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
                <option value="">-Select-</option>
                <option value="Pies">Pies</option>
                <option value="Trees">Trees</option>
                <option value="Cars">Cars</option>
        </select>
        <div class="clear"></div>
        <div id="error-message-style"></div>
    </div>
    <div id="Pies"  class="style-sub-1"  style="display: none;" name="stylesub1">
      <label>Pies</label>
            <select id="inds">
          <option value="">- Select -</option>
                <option value="28">Apple</option>
                <option value="3">Cherry</option>
                <option value="44">Pumpkin</option>
        </select>
    </div>
    <div id="Trees"  class="style-sub-1"  style="display: none;" name="stylesub1">
      <label>Trees</label>
            <select id="inds">
          <option value="">- Select -</option>
                <option value="38">Maple</option>
                <option value="11">Oak</option>
                <option value="14">Birch</option>
        </select>
    </div>
    <div id="Cars"  class="style-sub-1"  style="display: none;" name="stylesub1">
      <label>Cars</label>
            <select id="inds">
          <option value="">- Select -</option>
                <option value="39">Mazda</option>
                <option value="62">Ford</option>
                <option value="25">Toyota</option>
        </select>
    </div>
    <div class="clear"></div><div id="error-message-style-sub-1"></div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $("#dropStyle").change(function () {
      var targID = $(this).val();
      $("div.style-sub-1").hide();
      $('#' + targID).show();
    })

    d3.select('#inds')
        .on("change", function () {
          var sect = document.getElementById("inds");
            var section = sect.options[sect.selectedIndex].value;

      console.log("section:", section);
      // do other stuff with the section name
    });
    </script>

Answer 1

元素 ID 在整个文档中应该是唯一的，多个元素使用相同的 ID 并不是一个好习惯。

document.getElementById("inds") 或 $("#inds") 返回什么？您将始终获得第一个元素。

相反，使用一个类。只需将 id="inds"更改为 class="inds"并更新代码，如下所示。

$('.inds')
    .on("change", function () {      
        var section = $(this).val();    
  console.log("section:", section);
  // do other stuff with the section name
});

Updated Fiddle