How to get the value of all other dropdowns when one of them is changed

I am trying to populate a textbox based on values ​​from a set of dropdowns. Once the user changes the value of the dropdown, I would like to get the values ​​of all other dropdowns that are contained in the same div. In the example below I am trying to show the value of all 'selects' in a gien div through a dialog. When I run the code below, the dialog boxes don't 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());
        });
    });
});

      

+1


a source to share


1 answer


Can you add a class to each of the options in the div? For instance:

<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 jQuery could do this:

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

      

0


a source







All Articles