从多选下拉菜单中获取价值

Question

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

我已经找到了如何对第一个列表执行此操作，但是我希望能够获取-any-列表的值。 在我的jsfiddle中，当您单击Pie列表中的Pie列表中的任何项目时，都将在console.log中看到一个值，但是单击Trees或Cars列表中的任何项时，则没有该值。

我以为我可以给所有选择列表都提供相同的ID，但显然不能。 有什么建议么？ 我已经做了一些搜索，但是没有找到我想要的东西。 我已经在使用D3和jQuery，所以它们很好，但是普通的javascript也很好。 谢谢！

jsfiddle在这里 。

    <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
});

更新的小提琴

Answer 2

试试这个jQuery插件https://code.google.com/p/jquery-option-tree/

演示： http ： //kotowicz.net/jquery-option-tree/demo/demo.html