Question

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

我已经想出了如何为第一个列表执行此操作，但我希望能够获取-any-列表的值。在我的jsfiddle中，当你点击它们时，你会在console.log中看到饼图列表中的任何值，但是当它们和时，它们不会显示树或汽车列表中的任何项目。＃39;重新点击。

我以为我可以给所有选择列表提供相同的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（＆＃34; inds＆＃34;）或$（＆＃34;＃inds＆＃34;）会返回什么？你将永远得到第一个元素。

相反，使用一个类。只需更改id =＆＃34; inds＆＃34; to class =＆＃34; inds＆＃34;并更新如下代码。

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

Updated Fiddle

Answer 2

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

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

从多选下拉列表中获取价值

2 个答案: