Get value of select on change with class name

Question

I am using jQuery to add select in each row of a table. The selects are assigned a class name.

Now, I need to get the value of the select on change using this dynamically assigned class name.

$select = $('<select class="medName"></select>');

for(var i = 0;i < tmp.length-1; i++){
                $option = $('<option>'+tmp[i]+'</option>');
                $select.append($option);
}

Here tmp contains data fetched from backend.

Finally,

    var $row = $('<tr></tr>');
    var $data1 = $('<td></td>');
    var $data2 = $('<td></td>');
    var $data3 = $('<td></td>');
    var $data4 = $('<td></td>');

    //alert($select.html());

    $data1.append($select);
    $data2.append($type);
    $data3.append($text);
    $data4.append($label);

    $row.append($data1);
    $row.append($data2);
    $row.append($data3);
    $row.append($data4);

    $row.insertAfter('#CashMemoBody');

This works perfectly fine.

Now when I do,

$('.medName').on('change', function (e) {
        var val = $(this).find('option :selected').html();
        alert(val);
});

I do not even get an alert.

Inspect Element shows, that the classes are properly assigned.

Whats going wrong ?

Here the problem is NOT only dynamic binding, but also getting the value of the selected option. None of the provided solutions seem to work here. Hence the question.

`$('.medName').on('change', function (e) {` should be `$('body').on('change', '.medName', function (e) {` — Mr. Alien, Apr 01 '15 at 11:05
http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Apr 01 '15 at 11:06

Manoz · Accepted Answer · 2015-04-01T11:17:35.417

3

It should be-

$(document).on('change','.medName',function(){
  var val = $('option:selected',this).val()
  alert(val);
});

Because .medName is dynamically created

edited Apr 01 '15 at 11:17

answered Apr 01 '15 at 11:06

Manoz

6,507
13
68
114

I get an alert now, but not the content of the option. Something is still off! – Ankita Singh Apr 01 '15 at 11:08
you can use `$(this).val()` to get the selected value – empiric Apr 01 '15 at 11:14
@AnkitaSingh, What exactly you want? the text or the val attribute of option? Also I have edited my answer for selected value – Manoz Apr 01 '15 at 11:18

Get value of select on change with class name

1 Answers1