jquery - 如何根据其他下拉值启用/禁用下拉列表

Question

我的 asp.net MVC web 应用程序中有以下两个下拉列表:-

<div>

   <span class="f">Role</span>

     @Html.DropDownListFor(model =>model.Server.RoleID, ((IEnumerable<TMS.Models.TechnologyRole>)ViewBag.TechRole).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.Name), 
        Value = option.RoleID.ToString(),
        Selected = (Model.Server != null) && (option.RoleID == Model.Server.RoleID)
    }), "Choose...")
    @Html.ValidationMessageFor(model =>model.Server.RoleID)
</div>
<div>
   <span class="f">Virtual Center</span>

     @Html.DropDownListFor(model =>model.Server.VirtualCenterID, ((IEnumerable<TMS.Models.TMSServer>)ViewBag.Servers).Select(option => new SelectListItem {
        Text = (option == null ? "None" : option.Technology.Tag), 
        Value = option.TMSServerID.ToString(),
        Selected = (Model.Server != null) && (Model.Server != null) && (option.TMSServerID == Model.Server.VirtualCenterID)
    }), "Choose...")
    @Html.ValidationMessageFor(model =>model.Server.VirtualCenterID)
</div>

现在我需要以下内容:-

1. 仅当 Role 下拉列表值为“Virtual Server”时才启用 Virtual Center 下拉列表。

2. 如果用户取消选择“虚拟服务器”值，则清除虚拟中心下拉列表的选择并禁用它。

任何人都可以建议我如何实现它吗？

Answer 1

您可以使用 jQuery 做到这一点。

1. 为下拉菜单提供可预测的 ID 属性，以便您可以使用 jQuery 选择它们
2. 将第二个下拉列表中的禁用属性设置为默认值。
3. 当第一个下拉列表发生变化时，根据所选值更新禁用属性。

这是我的完整代码，它是这样做的:

下拉列表的声明，并设置默认属性:

@Html.DropDownListFor(model => model.Role, ((IEnumerable<string>)ViewBag.Roles).Select(o => new SelectListItem {
        Text = o, Value = o
    }), new Dictionary<string, object>() {  
        { "id", "rolesDropdown" }
    })

@Html.DropDownListFor(model => model.Server, ((IEnumerable<string>)ViewBag.Servers).Select(o => new SelectListItem {
        Text = o, Value = o
    }), new Dictionary<string, object>() {  
        { "disabled", "disabled" },
        { "id", "serversDropdown" }
    })

启用/禁用第二个下拉列表的脚本，具体取决于第一个下拉列表中的选定值:

<script type="text/ecmascript">

    $(document).ready(function () {

        var rolesDropdown = $("#rolesDropdown");
        var serversDropdown = $("#serversDropdown");

        rolesDropdown.on('change', function (sender, arg) {
            var newVal = $(this).val();
            serversDropdown.attr('disabled', newVal !== "Virtual Server");
        });

    });

</script>

请注意，如果您还没有，则必须在页面上包含 jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>