When One of 2 select boxes are changed, alert with the value for each select box

Question

Given the following:

<div class="filters" id="filters">
<select id="state" name="state" tabindex="1" >
<option value="">Filter by State</option>
<option value="AL" >Alabama</option>
<option value="AK" >Alaska</option>
<option value="AZ" >Arizona</option>
etc...
</select>

<select id="availability" availability="products" tabindex="2">
<option value="">Filter by Availability</option>
<option value="yes">Available 24/7</option><option value="no">Not Available 24/7</option>
</select>
</div>

What kind of JQUERY magic would bind to filters, so that any time the SELECT input(s) were changed, it would alert with the Values of STATE and AVAILABILITY?

Answer 1

Use a selector that will choose either and apply a change event handler. In the event handler get the value of each using a selector for each by name.

$('#state,#availability').change( function() {
    alert( $('#availability').val(); );
    alert( $('#state').val() );
});

You could, of course, get the values and concatenate them to output them in a single alert if needed.

Answer 2

You can add a class to both selects e.g. class="twoselects" and apply the change event handler to them both:

  $(".twoselects").change(function(){
      state = $("#state").val();
      avail = $("#availablility").val();
      //now do something
  });

Answer 3

Try:

$('#filters > select').change (function () {
    alert ($('#state').val ());
    alert ($('#availability').val ());
});