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

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. 只有当角色下拉列表值=“Virtual”时，才能启用虚拟中心下拉列表。
2. 如果用户取消选择“Virtual”值，则清除“Virtual”下拉列表的选择并禁用它。

有人能建议我如何实现这一点吗？

Answer 1

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 2

您可以使用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>

Answer 3

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