我的 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>
现在我需要以下内容:-
仅当 Role 下拉列表值为“Virtual Server”时才启用 Virtual Center 下拉列表。
如果用户取消选择“虚拟服务器”值,则清除虚拟中心下拉列表的选择并禁用它。
任何人都可以建议我如何实现它吗?
最佳答案
您可以使用 jQuery 做到这一点。
- 为下拉菜单提供可预测的 ID 属性,以便您可以使用 jQuery 选择它们
- 将第二个下拉列表中的禁用属性设置为默认值。
- 当第一个下拉列表发生变化时,根据所选值更新禁用属性。
这是我的完整代码,它是这样做的:
下拉列表的声明,并设置默认属性:
@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>
关于jquery - 如何根据其他下拉值启用/禁用下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19588727/