how to bind dynamic dropdownlist through ajax in mvc

Question

i am trying to bind dropdown list from ajax success but stuck . details model class for dropdown value

public class Ipcell
{ 
public List<ddlupc> upcList { get; set; }
}
 public class ddlupc
{
     public string UscCode { get; set; }
    public string UscDesc { get; set; }
}

function where dropdown is generating dynamically on Add button click

 function insRow() {                
  i++;
  let newRowContent = "<tr>"
  +"<td> <select 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);
                if (i>0) {
                    $.ajax({  
                        url: "../Home/GetupcData",  
                        datatype: "JSON",  
                        type: "Get",  
                        success: function(data) {  
                            debugger;  
                            for (var j = 0; j < data.upcList.length; j++) { 
 var opt = new Option(data.upcList[i]); 
                                var tr = $('input[name="grdbtn"]:click').closest('tr');
                                tr.find('select[name="upclist"]').append(opt);
 }  
                        }  
                    });  
                }

I am stucking at var opt = new Option(data.upcList[i]); i am not getting exact syntax how to do getting error :VM428:1 Uncaught TypeError: Failed to construct 'Option': Please use the 'new' operator, this DOM object constructor cannot be called as a function. values returning from controler code

 public JsonResult GetupcData()
  {
  List<Ipcell> result1 = new List<Ipcell>();
            conn.Open();
            string qry1 = "select IUM_USC_CODE,IUM_USC_DESC from V_IP_USC_MAST order by IUM_USC_CODE";
            OracleCommand command1 = new OracleCommand(qry1, conn);
            OracleDataReader reader1 = command1.ExecuteReader();
            List<ddlupc> objlist = new List<ddlupc>();
            Ipcell member1 = new Ipcell();
            while (reader1 != null && reader1.Read())
            {
                objlist.Add(new ddlupc { UscCode = reader1[0].ToString(), UscDesc = reader1[0].ToString() + ' ' + '-' + ' ' + reader1[1].ToString() });
                result1.Add(member1);
            }
            member1.upcList = objlist;
            conn.Close();
            Ipcell ipcl = new Ipcell();
            ipcl.upcList = result1[0].upcList;
            ipcl.CaseId = null;
            return Json(ipcl, JsonRequestBehavior.AllowGet);
        }

my concern is to bind values in dropdown .

Answer 1

in Ajax section did the folowing change

$.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); 
                        }  
                    });