Question

I am trying to populate a text box based on the values from a set of dropdowns. Once the user changes the value of a dropdown, I would like to get the values of all other dropdowns that are contained within the same div. In the example below, I am trying to display the value all ‘selects’ in a gien div through a dialog box. When i run the code below, the dialog boxes do not get hit at all.

HTML:

<div id="cat1">
    <select id="sel1" >
      <option  value="abc" > abc </option>
      <option  value="def" > def </option>
    </select>

    <select id="sel2">
      <option  value="rst" > rst </option>
      <option  value="uvw" > uvw </option>
    </select>
</div>

<div id="additional">
<!-- more selects -->
</div>

jQuery:

$(document).ready(function() {
    $("#sel1").change(function() {
        $(this).siblings('select').each(function() { 
                alert ('hi');  // does not even iterate
                alert($(this).val());
        });
    });
});

Answer 1

Can you add a class to each of the selects in the div? Like so:

<div id="cat1">
<select id="sel1" class="div1">
  <option  value="abc" > abc </option>
  <option  value="def" > def </option>
</select>

<select id="sel2" class="div1">
  <option  value="rst" > rst </option>
  <option  value="uvw" > uvw </option>
</select>
</div>

Then the jQuery could do this:

 $('.div1').each(function() { 
            alert ('hi');  // does not even iterate
            alert($(this).val());
    });