Run jQuery function on drop down change

Question

I wrote a jQuery function that currently runs on Click Event. I need to change it so that it runs when a drop down box (Select- Option) value is changed. Here is my code:

<form id="form1" name="form1" method="post" action="">
  <label>
    <select name="otherCatches" id="otherCatches">
      <option value="*">All</option>
    </select>
  </label>
</form>

$("#otherCatches").click(function() {
    $.ajax({
        url: "otherCatchesMap.php>",
        success: function(msg) {
            $("#results").html(msg);
        }
    });
});

I know these kind of comments are frowned upon, but nevertheless: Googling for `jquery change` would have given you the link to the `change()` function as first hit: http://api.jquery.com/change/ — Felix Kling, Feb 06 '11 at 01:02

score 34 · Accepted Answer · edited May 07 '13 at 19:27

34

Use change() instead of click():

jQuery(document).ready(function(){
  $("#otherCatches").change(function() {
    $.ajax({
     url: "otherCatchesMap.php>",
     success: function(msg){
       $("#results").html(msg);
     }
   });
  });
});

edited May 07 '13 at 19:27

Christopher

2,005
3
24
50

answered Feb 06 '11 at 00:59

Pan Thomakos

34,082
9
88
85

2

.change() is great for – Chris Abrams Feb 06 '11 at 01:00

score 23 · Answer 2 · answered Feb 06 '11 at 00:59

23

http://api.jquery.com/change/

$(function() {
    $("#otherCatches").change(function() {
       $(this).val() // how to get the value of the selected item if you need it
    });
});

answered Feb 06 '11 at 00:59

Robin

21,667
10
62
85

score 12 · Answer 3 · answered Feb 06 '11 at 01:05

12


$("#otherCatches").change(function () {
    //// Your code        
});

answered Feb 06 '11 at 01:05

Jith

1,701
3
16
22

Run jQuery function on drop down change

3 Answers3

Linked