Question posted in
You can find the official documentation here.

option selected text & val not able to find in dynamic row – Jquery ajax

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');
  }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    changes at

    <select onchange=funch(this) name='upclist' class='form-control' id='upcList" + i +"'><option selected='selected'>Select</option></select>

    and at funch() function pass sel

    function funch(sel)
 {

 var a= $(sel).find("option:selected").text();
 var b= $(sel).val();
 alert('a');
 alert('b');
  }

  2. 0

    You do not have a $(this) in an inline function unless you pass it:

    onchange="funch(this)"

function funch(this) { var a = $(this)... }

    A better idea is to use your jQuery as intended and delegate since the select is dynamic.

    $(function() {
  $("#ipcelltbll").on("change", "[name=upclist]", function() { 
    const a = $(this).find("option:selected").text();
    const b = $(this).val();
    console.log(a, b);
  })
  $("#ipcelltbll").on("click", "[name=grdbtn]", insRow)
  insRow(); // create one
})



let i = 0;

function insRow() {
  i++;
  let newRowContent = `<tr><td>
  <select name='upclist' class='form-control' id='upcList${i}'>
  <option selected='selected'>Select</option>
  <option value='1'>One</option>
  <option value='2'>Two</option></select></td>
  <td><input type='button' style='margin-left:2%;' value='Add' id='abc' name='grdbtn'  class='btnrowvalue3' /></td>
  </tr>`
  $("#ipcelltbll tbody").append(newRowContent);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ipcelltbll">
  <tbody></tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search