get value from multi-select dropdown

Question

I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.

I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.

I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!

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

Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.

what does document.getElementById("inds") or $("#inds") return? You will get the first element always.

Rather, use a class. Just change id="inds" to class="inds" and update code like below.

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

Updated Fiddle

Answer 2

Try this jQuery Plugin https://code.google.com/p/jquery-option-tree/

Demonstration: http://kotowicz.net/jquery-option-tree/demo/demo.html