当 @Html.DropDownList 被 jQuery 更新时，如何为 @Html.DropDownListFor（selectpicker 类）选择数据？答案

【问题标题】：How to select data for @Html.DropDownListFor (selectpicker class) when @Html.DropDownList is updated, by jQuery?当 @Html.DropDownList 被 jQuery 更新时，如何为 @Html.DropDownListFor（selectpicker 类）选择数据？
【发布时间】：2019-03-02 22:01:53
【问题描述】：

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

型号：

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

HTML：

@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" })

}

jQuery:

$('#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 获取数据，然后设置为所有 dropDownListTest。但这是行不通的。有人可以帮我推荐一下吗？

【问题讨论】：

您要创建级联DropDownList吗？斯蒂芬的这个小提琴可能是一个好的开始：dotnetfiddle.net/1bPZym.
@for (var i = 0; i < Model.Count; i++) 是剃须刀代码，在发送到视图之前在服务器上执行。摆脱那些 id 属性并为选择器使用类名 = var selected = $(this).val(); $.each('.selectpicker', function() { $(this).val(selected); });
@TetsuyaYamamoto，是的，我已经创建了下拉列表。我想在 jquery 更改下拉列表时创建事件。该事件将从下拉列表中获取数据，然后设置为另一个下拉列表。
@StephenMuecke，理解并感谢您。

标签： c# jquery html asp.net-mvc twitter-bootstrap

【解决方案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() 方法从<select> 元素和id="dropDownListSelectToAnotherDropDownList" 中选择值填充它们。下面的两个例子应该有相同的结果：

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

【讨论】：