HTML <select> JQuery .change not working

Question

Alright I don't see why this isnt working. It seems pretty simple.

Here is my drop-down menu:

<div>
    <form>
        <select id='yearDropdown'>
            <c:forEach var="years" items="${parkYears}">
                <option value=/events.html?display_year=${years}<c:if test="${currentYear == years}">selected="selected"</c:if>>${years}</option>
            </c:forEach>
        </select>
    </form>
</div>

and here is the JavaScript

$("#yearDropdown").change(function () {
    alert('The option with value ' + $(this).val());
});

Right now I just want to get it working so I can add functionality. Thanks!

What is the rendered output of the control(view source, inspect element, etc...)? — Brandon J. Boone
– Brandon J. Boone, Commented Jun 26, 2012 at 21:28
forgive me, I don't know what your asking. I'm a CS student. and I have practically no knowledge of javascript — theCamburglar
– theCamburglar, Commented Jun 26, 2012 at 21:29
Rather than saying "it no work", could you tell us exactly what is happening? You get no alert, ok, got that. But does your console say anything? Have you loaded jQuery correctly? Is the context of this javascript event wireup inside of a $(function(){ }); call? — Jason
– Jason, Commented Jun 26, 2012 at 21:31
Why on earth is this so downvoted? It's a perfectly reasonable and well formulated question. — WhyNotHugo
– WhyNotHugo, Commented Jun 26, 2012 at 21:39
Regarding the accepted answer, make sure you use delegate instead of live if you are using jQuery 1.6.x or earlier and on() instead of live() v1.7, due to the many drawbacks of live(). More details here: stackoverflow.com/a/11148053/448144 — Nope
– Nope, Commented Jun 26, 2012 at 21:50

Alex · Accepted Answer · 2020-10-08 14:57:40Z

43

That code is syntactically correct. Most likely running it at the wrong time.

You'll want to bind the event when the DOM is ready:

Native JS/DOM

window.addEventListener('DOMContentLoaded', () => {
    const yearDropDown = document.getElementById('yearDropdown');
    yearDropDown.addEventListener('change', () => { 
        alert(yearDropDown.value)
    });
});

jQuery

$(function(){ /* DOM ready */
    $("#yearDropdown").change(function() {
        alert('The option with value ' + $(this).val());
    });
});

Or, use live:

$("#yearDropdown").live('change', function() {
    alert('The option with value ' + $(this).val());
});

Or, use delegate:

$(document.body).delegate('#yearDropdown', 'change', function() {
    alert('The option with value ' + $(this).val());
});

Or, if you're using jQuery 1.7+:

$("#yearDropdown").on('change', function() {
    alert('The option with value ' + $(this).val());
});

Nonetheless, it is usually best to execute script once the browser has finished rendering Markup.

edited Oct 8, 2020 at 14:57

answered Jun 26, 2012 at 21:29

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Derek 朕會功夫 Over a year ago

It does not matter because .change will apply to every newly added element. (Correct me if it is incorrect)

WhyNotHugo Over a year ago

@Derek: You're wrong, it applies to elements that match the expression (#yearDropdown) the moment that line is executed. jQuery doesn't monitor for new elements or anything alike.

WhyNotHugo Over a year ago

@user1469925 The difference is that this function is called once the document has finished loading, and the DOM has been created. Your code executes as soon as it's read, and the DOM might not be ready yet - the select doesn't exist yet.

theCamburglar Over a year ago

Thanks for explaining, I guess I need to read up on the DOM. Like I said I'm a CS student doing an internship alittle bit over my head. Its fun though!

Nope Over a year ago

If you are using jQuery pre 1.7 do not use live but use delegate instead. Also, live was mainly useful for when you wanted to bind to dynamic injected elements. This is what on() is for now as live has a lot of drawbacks, See here for more details:stackoverflow.com/a/11148053/448144

|

Alberto De Caro · Accepted Answer · 2012-06-26 21:36:26Z

3

I have tried your code in jsFiffle. I manually added some years as options. It works right.

Just bind the .change event in the $(document).ready:

$(document).ready(function(){
  $("#yearDropdown").change(function () {
      alert('The option with value ' + $(this).val());
  });
});

answered Jun 26, 2012 at 21:36

Alberto De Caro

5,2139 gold badges50 silver badges77 bronze badges

Comments

Louis B. · Accepted Answer · 2012-06-26 21:31:41Z

0

Your code is correct and is working for me, see here: http://jsfiddle.net/mobweb/2Skp9/

Are you sure jQuery has been loaded properly?

answered Jun 26, 2012 at 21:31

Louis B.

2,3681 gold badge31 silver badges52 bronze badges

Comments

Logard · Accepted Answer · 2012-06-26 21:34:22Z

0

Not sure if this will help, but you could try this:

    $("#yearDropdown").live("change", function () {
    alert('The option with value ' + $(this).val());
});

answered Jun 26, 2012 at 21:34

Logard

1,5131 gold badge13 silver badges27 bronze badges

2 Comments

Derek 朕會功夫 Over a year ago

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

Logard Over a year ago

It is? Need to read up on release notes then I guess. Thanks for the info.

Collectives™ on Stack Overflow

HTML <select> JQuery .change not working

4 Answers 4

13 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

13 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related