Jquery change event not fired when using selected attribute on select item

Question

I have a HTML code generated dynamically from a model using .NET MVC. Between the field there is a select with selected option (based on the data from the model).

<select class="myClass" data-val="true" id="sampleSelect" name="sampleSelect"> <option value="">Select an option</option> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> </select>

I want to attach change event using jQuery like this:

$('#sampleSelect').change(function () { var test = $('#sampleSelect').val(); });

Or like this:

$('#sampleSelect').on('change', function () { var test = $('#sampleSelect').val(); });

Or even with delegate... none of those works. It seems that there is no change done, option value 3 remains with selected attribute.

I don't want to modify the HTML, I just one to use the right javascript code to catch the event.

Do you have any suggestions?

Edit: Attribute selected remains on value 3. Even if I select different item. And the change event doesn't fire. I don't know why. This is my problem.

FINAL EDIT: My bad, the selecting was done in a right way. The problem is that there were 2 selects with the same id and jQuery kept choosing the hidden one somewhere else on the screen.

Thanks for the fast answers though.

Possible duplicate of jquery select change event get selected option — Mr. Polywhirl
– Mr. Polywhirl, Commented Jan 20, 2017 at 11:41
if you are selecting the same element then there is no change. So the event will not fire. — Nagaraju
– Nagaraju, Commented Jan 20, 2017 at 11:42
These might not work because of your timing. If your html is generated after your jQuery code has run then the code wont effect the html elements. If this is the case you would need to attach your code to elements that already existed like the answers below or stackoverflow.com/questions/203198/… — Craicerjack
– Craicerjack, Commented Jan 20, 2017 at 11:42
You mean that... the change event is not fired or the selected option isn't updated? — andreivictor
– andreivictor, Commented Jan 20, 2017 at 11:43

Tejas Soni · Accepted Answer · 2017-01-20 11:49:50Z

Your HTML code generated dynamically.So, you have to use $(document).on(); jquery

For example:

$(document).on('change','#sampleSelect', function () { // your code });

mvc_help · Accepted Answer · 2017-01-20 11:42:09Z

You could try:

$(document).on("change", "#sampleSelect", function () { // Stuff });

naota · Accepted Answer · 2017-01-20 12:37:42Z

Your code seems file. DEMO : http://jsfiddle.net/6cLs6hcx/

I guess you might want to add an event handler inside the ready() method :

Document : https://api.jquery.com/ready/

$( document ).ready(function() { // Handler for .ready() called. });

Which is equivalent to the recommended way:

$(function() { // Handler for .ready() called. });

So your code could go like this:

$(function() { $('#sampleSelect').change(function () { var test = $('#sampleSelect').val(); }); });

A tutorial is here : https://www.tutorialspoint.com/jquery/jquery-events.htm

Dilipkumar63 · Accepted Answer · 2017-03-02 09:23:16Z

1

$(document).on('change', '.selectOption', function() { console.log($(this).val()); });

answered Mar 2, 2017 at 9:23

Dilipkumar63

1511 silver badge3 bronze badges

1 Comment

hatef Over a year ago

Could you elaborate your answer please?

Jake Taylor · Accepted Answer · 2017-12-19 16:22:35Z

1

I think you mean the HTML content is loaded in after page load? If so use

$(document).on('change', '#sampleSelect', function () { var test = $('#sampleSelect').val(); // OR var test = $(this).val(); // OR var test = this.value; });

Which attaches the event even if the element isn't available initially.

edited Dec 19, 2017 at 16:22

answered Jan 20, 2017 at 11:42

Jake Taylor

2,6002 gold badges15 silver badges16 bronze badges

5 Comments

Mr. Polywhirl Over a year ago

I would use this instead, because we already have the context established for the element in the setup for the event. var selectedValue = $(e.target || this).val();

Jake Taylor Over a year ago

Sorry, I don't understand

Mr. Polywhirl Over a year ago

Using var test = $('#sampleSelect').val(); is pointless when you know the event is already for that element. By doing what you did, you are RE-QUERYING for the object. You actually already have it. You can use this or you can set e (for the incoming event param) and use e.target to get the value.

Mr. Polywhirl Over a year ago

Simply: $(document).on('change', '#sampleSelect', function(e) { var test = $(e.target).val(); // or $(this).val(); });

Jake Taylor Over a year ago

Sorry, I thought you were OP. Yes, $('#sampleSelect').val() could be $(this).val() or this.value.

Binjal Soni · Accepted Answer · 2024-08-13 08:55:55Z

check below sample

function notify() { alert( "changed" ); } $("#sampleSelect").on("change", notify);

Collectives™ on Stack Overflow

Jquery change event not fired when using selected attribute on select item

6 Answers 6

Comments

Comments

Comments

1 Comment

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

5 Comments

Comments

Linked

Related