i am trying to option selected text & val in dynamic row but not able to get getting blank for
var a= $(this).find("option:selected").text();
i.e " "
and in
var b= $(this).val();
getting error "Uncaught TypeError: Cannot read property ‘toLowerCase’ of undefined". How to resolve it
Details below
Html Section
<table id="ipcelltbll">
<thead>
<tr>
<td>USC Code</td>
<td>Add</td>
</tr>
</thead>
<tbody>
<tr class="">
<td>@Html.DropDownList("upcList", new SelectList(Model.upcList, "UscCode", "UscDesc"), "Please Select", new { @class = "form-control"})</td>
<td><input type="button" value="Add" id="abc" name="grdbtn" class="btnrowvalue3" onclick="insRow()" /></td>
</tr>
</tbody>
</table>
dynamic row generated function
var i=0;
function insRow() {
i++;
let newRowContent = "<tr>"
+"<td> <select onchange=funch() name='upclist' class='form-control' id='upcList" + i +"'><option selected='selected'>Select</option></select></td>"
+"<td><input type='button' style='margin-left:2%;' value='Add' id='abc' name='grdbtn' class='btnrowvalue3' onclick='insRow()' /></td>"
+ "</tr>";
$("#ipcelltbll tbody").append(newRowContent);
//value bind in dropdown through ajax
if (i>0) {
$.ajax({
url: "../Home/GetupcData",
datatype: "JSON",
type: "Get",
success: function(data) {
debugger;
var s = '<option value="-1">Please Select</option>';
for (var k = 0; k < data.upcList.length; k++) {
s += '<option value="' + data.upcList[k].UscCode + '">' + data.upcList[k].UscDesc + '</option>';
}
$("#upcList"+i+"").html(s);
}
});
}
and onchange function in each dynamic dropdown list is funch()
fetching dropdown value as given below
function funch()
{
var a= $(this).find("option:selected").text();
var b= $(this).val();
alert('a');
alert('b');
}
2
Answers
changes at
and at funch() function pass sel
You do not have a
$(this)
in an inline function unless you pass it:A better idea is to use your jQuery as intended and delegate since the select is dynamic.