CODEWITHSUNDEEP
jquery
shashi
shashi

Reputation: 4696

Jquery change not firing for select element

I have bound a simple handler to change event of a select element as follows

  $("#ddlPincode").change(function() {
        alert("Hello");
        UpdateMapFromPincode();
    });

But when I change the pincode dropdown, nothing happens. There are no errors in Firebug as well.

The ddlPincode is empty and elements are added by an ajax call, when a different select element (ddlCity) is changed. The above code where I bind the event handler was initially within the $(function(){}) where other jquery code is present. I then put it in the success of the ajax call after I bind the select to the resultSet from the server. This also doesn't do anything

Upvotes: 2

Views: 3410

Answers (4)

Brett Ryan
Brett Ryan

Reputation: 28255

Note that select elements only fire onchange when the field loses focus. To always fire the change event have the select trigger the change event on the keyup event:

$("select").keyup(function() { $(this).trigger('change'); });

This will ensure that the select always triggers the change event. Note that if the value does not actually change because keyup did not change the selection the event will still fire.

Upvotes: 1

Akhil Thayyil
Akhil Thayyil

Reputation: 9403

i think you are using some other jquery plugins to enhance the select box ie , like jqtranform , if we use such plugin , then the jquery change event will not work , as it creates another wrapper for nice ui.

So check this suggestion...

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

I think you should post your entire html or a fiddle on jquery because i've tried this and it works for me, and your code looks ok (no need to use live() or delegate() here):

http://jsfiddle.net/qYqG8/

Upvotes: 0

Samich
Samich

Reputation: 30095

Your code should works perfectly. The only rease if you recreate this drop down control. Here is my test code:

html

<input type="button" id="btn" value="Fill" />
<select id="ddl"></select>

js

$(function() {
    $('#btn').click(function() {
        for (var index = 0; index < 10; index++) {
            $('#ddl').append('<option>' + index + '</option>');
        }
    });

    $('#ddl').change(function() {
       alert('changed');
    });
});

Code: http://jsfiddle.net/qGg87/2/

Upvotes: 0

Related Questions