[英]how to bind dynamic dropdownlist through ajax in mvc
我正在尝试从 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);
}
我关心的是在 dropdown 中绑定值。
在 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.