html.dropdownlist 的 Javascript 更改事件答案

【问题标题】：Javascript change event for html.dropdownlisthtml.dropdownlist 的 Javascript 更改事件
【发布时间】：2014-03-20 13:01:23
【问题描述】：

我是 javascript 的初学者。

我尝试在 Asp.net Mvc 中使用 Html.Dropdownlist。

我有 1 个下拉列表和其他 4 个下拉列表。

如果 1.dropdownlist 更改值，我想通过在 javascript 中使用 foreach 为 4 个下拉列表应用 1.dropdownlist 值。

HTML：

@Html.DropDownList("MainDropDownList", listItems, "Select", new { @id = "MainDropDownListID" }) 

// İf this dropdownlist value changes , i want to apply value to other dropdownlists.

<table>
    <tr>
        <td>@Html.DropDownList("MyDropDownList1", listItems)</td>
        <td>@Html.DropDownList("MyDropDownList2", listItems)</td>
        <td>@Html.DropDownList("MyDropDownList3", listItems)</td>
        <td>@Html.DropDownList("MyDropDownList4", listItems)</td>
    </tr>
</table>

Javascript：

  $(function () {
        $('select#MainDropDownListID').change(function () {
            var SelectedValue = $(this).val();

         //How can i apply selectedvalue to 4 dropdownlists value using foreach ?

        });
    });

【问题讨论】：

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

【解决方案1】：

jQuery的.val()函数也可以用于set a value by supplying the value as an argument：

$('#MainDropDownListID').change(function () {
    var SelectedValue = $(this).val();
    $('table select').val(SelectedValue);
});

【讨论】：

我将接受您的代码作为最佳答案。感谢您的帮助。我想再学习一件事。如果我的表 id 是 "MyTableID" ，代码将如何。如何使用表 ID 代替“表选择”？
@user3409638：您也可以在选择器中指定id，例如#MyTableID select。用空格分隔选择器元素仅仅意味着后面的元素是前面元素的后代。

【解决方案2】：

首先，您需要正确访问下拉列表 - #MainDropDownListID for ID

然后只需设置值

$(function () {
    $('#MainDropDownListID').change(function () {
        var SelectedValue = $(this).val();
        $('#MainDropDownList1").val(SelectedValue);
        $('#MainDropDownList2").val(SelectedValue);
        $('#MainDropDownList3").val(SelectedValue);
        $('#MainDropDownList4").val(SelectedValue);
    });
});

或一次性

$('select[id^"MainDropDownList"]').val(SelectedValue);

或使用每个：

$("table").find('select[id^"MainDropDownList"]').each(function() { 
 $(this).val(SelectedValue);
});

【讨论】：

如何使用 foreach 做到这一点？我不想一一设置。

【解决方案3】：

为每个下拉菜单分配一个唯一的 ID 并执行以下操作：

<td>@Html.DropDownList("MyDropDownList1", listItems,new {id="ddl1"})</td>

     $("#ddl").change(function()
    {
       var SelectedValue = $(this).val();

    });

【讨论】：