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

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. 仅当角色下拉列表值 = “虚拟服务器”时启用虚拟中心下拉列表。

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

谁能建议我如何实现这个？

Answer 1

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

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

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

下拉列表的声明和设置默认属性：

@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>

Answer 2

对于 1：

@Html.DropDownListFor(model =>model.Server.VirtualCenterID, ..., new { disabled = "disabled" })

$(document).ready(function () {
        $("selectorForFirstDropDown").change(function () {
            if ($(this).val() == "Virtual Server") {
                $("selectorForSecondDropDown").removeAttr("disabled");
            }
            else {
                $("selectorForSecondDropDown").attr("disabled", "disabled");
            }
        });
    });

示例：

// Model
public class model
{
    public string first { get; set; }
    public string second { get; set; }
}

// Controller
public ActionResult Index()
{
    ViewBag.List = new List<Tuple<string, string>>()
    {
        new Tuple<string, string>("1", "a"),
        new Tuple<string, string>("2", "b"),
        new Tuple<string, string>("3", "c"),
    };

    return View();
}

// View
@Html.DropDownListFor(m => m.first, new SelectList(ViewBag.List, "Item1", "Item2"))
@Html.DropDownListFor(m => m.second, new SelectList(ViewBag.List, "Item1", "Item2"), new { disabled = "disabled" })

<script type="text/javascript">

    $(document).ready(function () {
        $("#first").change(function () {
            if ($(this).val() == "2") {
                $("#second").removeAttr("disabled");
            }
            else {
                $("#second").attr("disabled", "disabled");
            }
        });
    });

</script>

Answer 3

1. 初始设置Virtual Server下拉列表disabled。
2. 为角色下拉列表的onchange 事件编写js function。
3. 在 js 函数中检查 Roles 下拉列表中选择的值是否为“Virtual Server”。
4. If true, enable 虚拟服务器下拉列表。
5. Elsedisable 虚拟服务器下拉列表。