![](/img/trans.png)
[英]Clone @Html.DropdownList using javascript Asp.Net MVC
[英]Populate Html.DropDownList() in JQuery using ASP.NET MVC Razor
当addrow button
点击时,我想在每一行中获取dropdownlist
。 我不知道该怎么做。 这是我所拥有的:
$('#addrow').click(function () {
var tr = "<tr><td>@@Html.DropDownList(\"Bank\", null, htmlAttributes: new { @@class = \"form-control\" })"
+ "</td><td><div>"
+ "<div class=\"input-group date\">"
+ "<div class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i>"
+ "</div>"
+ "<input type=\"text\" class=\"form-control ChqDate\" name=\"ChqDate\" placeholder=\"Chq Date\">"
+ "</div><!-- /.input group -->"
+ "</div></td>"
+ "<td><input type=\"number\" name=\"Amount\" class=\"form-control\" id=\"ChqAmount\" placeholder=\"Cheque Amount\" /></td>"
+ "<td><button data-itemId=\"0\" type=\"button\" class=\"btn btn-danger removeRow\"><span class=\"glyphicon glyphicon-trash\"></span></button></td></tr>";
$('#example1 tbody').append(tr);
$('#example1 tbody .ChqDate').datepicker({
autoclose: true
});
});
首先让你的下拉菜单在视图中(但对用户不可见):
@Html.DropDownList("Bank-Template", null, htmlAttributes: new { style="display: none;", id="Bank-Template" })
然后在 javascript 中使用它作为模板:
$('#addrow').click(function () {
var tr = "<tr><td><select name=\"Bank\" class=\"form-control\">" + $("#Bank-Template").html()
+ "</select></td><td><div>"
+ "<div class=\"input-group date\">"
+ "<div class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i>"
+ "</div>"
+ "<input type=\"text\" class=\"form-control ChqDate\" name=\"ChqDate\" placeholder=\"Chq Date\">"
+ "</div><!-- /.input group -->"
+ "</div></td>"
+ "<td><input type=\"number\" name=\"Amount\" class=\"form-control\" id=\"ChqAmount\" placeholder=\"Cheque Amount\" /></td>"
+ "<td><button data-itemId=\"0\" type=\"button\" class=\"btn btn-danger removeRow\"><span class=\"glyphicon glyphicon-trash\"></span></button></td></tr>";
$('#example1 tbody').append(tr);
$('#example1 tbody .ChqDate').datepicker({
autoclose: true
});
});
但是您必须为控件设置唯一的名称,否则数据可能会作为数组发布到服务器。 例如 ChqDate[0], Bank[0],ChqDate[1], Bank[1],...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.