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.

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.

• javascript
• jquery
• html
• html-select

• Possible duplicate of jquery select change event get selected option – 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 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./questions/203198/… – Craicerjack Commented Jan 20, 2017 at 11:42
• your code is working whats the problem – Akshay Commented Jan 20, 2017 at 11:42
• You mean that... the change event is not fired or the selected option isn't updated? – andreivictor Commented Jan 20, 2017 at 11:43

6 Answers 6

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

For example:

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

You could try:

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

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

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

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

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

Which is equivalent to the remended 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./jquery/jquery-events.htm

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

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.

check below sample

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