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

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

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. 将第二个下拉列表中的disabled属性设置为默认值。
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函数中，检查“角色”下拉列表的选定值是否为“虚拟服务器”。
4. If true, enable虚拟服务器下拉列表。
5. Else disable虚拟服务器下拉列表。