2

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.

Hawk
  • 374
  • 3
  • 22
  • Possible duplicate of [jquery select change event get selected option](http://stackoverflow.com/questions/12750307/jquery-select-change-event-get-selected-option) – Mr. Polywhirl Jan 20 '17 at 11:41
  • if you are selecting the same element then there is no change. So the event will not fire. – Nagaraju Jan 20 '17 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 http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Craicerjack Jan 20 '17 at 11:42
  • your code is working whats the problem – Akshay Jan 20 '17 at 11:42
  • You mean that... the `change` event is not fired or the selected option isn't updated? – andreivictor Jan 20 '17 at 11:43
  • Change event is not fired. That's the problem. And selected attribute remains on the same item, even though I select something else. – Hawk Jan 20 '17 at 11:48

5 Answers5

4

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

For example:

$(document).on('change','#sampleSelect', function () {
    // your code
});
Tejas Soni
  • 521
  • 3
  • 10
1

You could try:

$(document).on("change", "#sampleSelect", function () {
    // Stuff
});
mvc_help
  • 187
  • 9
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.

Jake Taylor
  • 1,835
  • 2
  • 9
  • 16
  • 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();` – Mr. Polywhirl Jan 20 '17 at 11:47
  • Sorry, I don't understand – Jake Taylor Jan 20 '17 at 12:03
  • 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 Jan 20 '17 at 12:15
  • Simply: `$(document).on('change', '#sampleSelect', function(e) { var test = $(e.target).val(); // or $(this).val(); });` – Mr. Polywhirl Jan 20 '17 at 12:16
  • Sorry, I thought you were OP. Yes, `$('#sampleSelect').val()` could be `$(this).val()` or `this.value`. – Jake Taylor Jan 20 '17 at 12:16
1

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

naota
  • 4,462
  • 1
  • 15
  • 20
1
$(document).on('change', '.selectOption', function() {
    console.log($(this).val());
});
Dilipkumar63
  • 151
  • 1
  • 3