如何在mvc中通过ajax绑定动态下拉列表答案

【问题标题】：how to bind dynamic dropdownlist through ajax in mvc如何在mvc中通过ajax绑定动态下拉列表
【发布时间】：2020-09-30 00:48:50
【问题描述】：

我正在尝试从 ajax 成功绑定下拉列表但卡住了。细节下拉值的模型类

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

点击添加按钮时动态生成下拉菜单的功能

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

我卡在var opt = new Option(data.upcList[i]); 我没有得到确切的语法怎么做出现错误：VM428：1 未捕获类型错误：无法构造“选项”：请使用“新”运算符，此 DOM 对象构造函数不能作为函数调用。从控制器代码返回的值

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

我关心的是在下拉列表中绑定值。

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

在 Ajax 部分进行了以下更改

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

【讨论】：