当 @Html.DropDownList 通过 jQuery 更新时，如何为 @Html.DropDownListFor

Question

我正在通过 ASP.NET-MVC开发Web应用程序。

型：

public partial class MyModel
{
public string TEST { get; set; }
}

目录：

@model IList<MyModel>
@Html.DropDownList("dropDownListSelectToAnotherDropDownList", (SelectList)ViewBag.testList[0], null, new { id = "dropDownListSelectToAnotherDropDownList", title = "[--Select to all--]", @class = "selectpicker form-control", data_style = "btn btn-default", data_width = "100%", data_live_search = "true", data_size = "9" })
@for (var i = 0; i < Model.Count; i++)
{
@Html.DropDownListFor(m => Model[i].TEST, (SelectList)ViewBag.testList[i], null, new { id = "dropDownListTest" + i, title = "[--Select Test--]", @class = "selectpicker form-control", data_style = "btn btn-default", data_width = "100%", data_live_search = "true", data_size = "9" })
}

j查询：

$('#dropDownListSelectToAnotherDropDownList').on('keyup change', function () {
@for (var i = 0; i < Model.Count; i++)
{
$('dropDownListTest' + i).val($(this).val());
//$('dropDownListTest' + i).selectpicker('val', $(this).val());
}
});

作为上面的代码，我将得到dropDownListSelectToAnotherDropDownList和许多dropDownListTest(例如：dropDownListTest0，dropDownListTest1，...，dropDownListTestN(，这取决于模型的数量。 我想在dropDownListSelectToAnotherDropDownList更改时创建事件。该事件将从dropDownListSelectToAnotherDropDownList获取数据，然后设置为 alldropDownListTest。但这不是工作。 有人可以帮忙建议我吗？

Answer 1

首先，您应该删除所有id定义，并为循环内DropDownListFor创建的<select>元素使用单独的类名，例如dropDownListTest：

@for (var i = 0; i < Model.Count; i++)
{
@Html.DropDownListFor(m => Model[i].TEST, (SelectList)ViewBag.testList[i], null, new { title = "[--Select Test--]", 
@class = "selectpicker form-control dropDownListTest", ... })
}

然后，使用jQuery.each()方法使用id="dropDownListSelectToAnotherDropDownList"元素中的选定值填充它们<select>。下面的两个示例应具有相同的结果：

// example 1
$('#dropDownListSelectToAnotherDropDownList').on('keyup change', function () {
val selectedValue = $(this).val();
$('.dropDownListTest').each(function () {
$(this).val(selectedValue);
})
});
// example 2
$('#dropDownListSelectToAnotherDropDownList').on('keyup change', function () {
val selectedValue = $(this).val();
$.each($('.dropDownListTest'), function () {
$(this).val(selectedValue);
})
});