在jQuery中获取附加选择列表的值

Question

I just want to ask how to get the selected value from appended select list using jquery. Please help me. Thanks in advance.

 var wrapper1 = $(".column1"); array1 = ["sample1", "sample2", "sample3"]; var myRoot = window.location.origin + "/"; $.ajax({ url: myRoot + 'Payslip/GetDataFromAppend', type: 'GET', contentType: "application/json; charset=utf-8", //data: JSON.stringify({ id: $this }), async: true, success: function (data) { $(wrapper1).append(appendOption(data, array1[0])); } }); var appendOption = function (data, txtData) { var appendfor = '<label class="col-sm-4 control-label"><label> ' + txtData + '...</label></label><div class="col-sm-7">' + '<select class="form-control" asp-for="PayslipID" asp- items="ViewBag.PayslipID" data- val="true" data- val - required="The Payslip ID field is required." id= "PayslipID" >'; for (var i = 0; i < data.length; i++) { console.log(data[i].value); appendfor += '<option value="' + data[i].value + '">' + data[i].value + '</option>'; } appendfor += '</select ></div >'; return appendfor; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group column1"></div> 

Answer 1

The 'form-control' element is added to the page dynamically so you need to use event delegation, try this:

$(document).on('change', ".form-control", function(){
    alert($(this).val())
});

'column1' should also work in place of 'document' assuming that it is a static element.