CODEWITHSUNDEEP
phpjqueryhtml
BenW
BenW

Reputation: 1443

jQuery dropdown change event no triggering

I am new to jQuery and having trouble to trigger change event in drop down box.

This is my HTML markup

<select id="mini_bookinglocation" name="mini_bookinglocation">
    <option selected="selected" value="">Please Select</option>
</select>

This is my jQuery

$("#mini_bookinglocation").change(function() 
{
    alert(" test ");
});

I have tried put this inside the document ready block as well as outside but seems I can't get it working. I don't see the alert coming out.

Also do I need to keep these function withing the document ready section ?

Can anyone help ?

Thanks

Just to add that the values for the above will pass dynamically using jQuery.

Upvotes: 2

Views: 1244

Answers (4)

BenW
BenW

Reputation: 1443

I found the problem. it is because in my code I use jQuery in one place and $ in another place. I was able to google this and just changed all to jQuery and removed all $ and it works. Sorry for not showing the full code but I was able to learn lot by reading all answers.

Thank you all for the help.

Upvotes: 0

Sibu
Sibu

Reputation: 4617

Try adding more options, because change event is fired when there is a change in values. In your case there is no change in values. 

<select id="mini_bookinglocation" name="mini_bookinglocation">
    <option selected="selected" value="">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
   </select>

From The docs

The change event is sent to an element when its value changes. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Also do I need to keep these function withing the document ready section ?

No, there is no need to put the code under ready function because the event is fired when change happens

DEMO

Upvotes: 5

user1873471
user1873471

Reputation:

Assign change event listener in the document ready function

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript">

        $(document).ready(function() {
            $("#mini_bookinglocation").change(function() {
                alert(" test ");
            });
        });

        </script>
    </head>
    <body>
        <select id="mini_bookinglocation" name="mini_bookinglocation">
        <option selected="selected" value="">Please Select</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
        <option value="C">Option C</option>
        <option value="D">Option D</option>
        <option value="E">Option E</option>
        </select>
    </body>
</html>

Here is an example

Upvotes: 1

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5301

You have only one value in dropdown. So value is never changed. Thats why .change is not called. Try adding more options in select box.

Also you should write the jQuery code inside document.ready.

Upvotes: 8

Related Questions