更改2个选择框之一时，用每个选择框的值进行提醒

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

Try:

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

Answer 2

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 3

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

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