从下拉列表助手中删除元素答案

【问题标题】：Remove an element from dropdownlist helper从下拉列表助手中删除元素
【发布时间】：2012-09-17 18:34:48
【问题描述】：

我有一个包含两个 @Html.DropDownListFor 助手的视图：

 <div class="editor-field">
        @Html.DropDownListFor(model => model.Employee, (IEnumerable<SelectListItem>)ViewBag.emps, "--Select--", new { style = "width:150px", id = "ddl1"})
        @Html.ValidationMessageFor(model => model.Employee)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.Employee2, (IEnumerable<SelectListItem>)ViewBag.emps, "--Select--", new { style = "width:150px", id = "ddl2"})
        @Html.ValidationMessageFor(model => model.Employee2)
    </div>

它们是这样填充的：

public ActionResult Create()
    {
        List<Employees> emps = new List<Employees>();
        emps.Add(new Employees { Id = 0, Name = "Michael Jordan" });
        emps.Add(new Employees { Id = 1, Name = "Magic Johnson" });
        emps.Add(new Employees { Id = 2, Name = "Larry Bird" });

        var items = emps.Select(i => new SelectListItem
        {
            Value= i.Id.ToString(),
            Text =i.Name
        });
        ViewBag.emps = items;
        return View();
    }

如何从第二个 DDL 中删除第一个 DDL 的选定项？我设法像这样使用 jQuery 获取所选项目：

<script type="text/javascript">
$(function () {
    $("#ddl1").change(function () {
        alert($("#ddl1").val());
    });
});
</script>

但是，我找不到将它用于我的目的的方法。

【问题讨论】：

How to remove the selected element during a clone() operation 的可能重复项

标签： jquery asp.net-mvc razor asp.net-mvc-4

【解决方案1】：

这样的东西一定对你有用：

$(function(){
    var lists = $('#ddl1, #ddl2');
    lists.change(function(){
        var elm = $(this);
        lists.find('option').show();
        var option = lists.not('#' + this.id)
            .find('option[value="' + elm.val() +'"]').hide();

        if(option.is(':selected'))
        {
            var select = option.closest('select');
            select.val(select.find('option:visible:first').val());
        }
    });
});

演示链接：jsfiddle.net

添加： 发布的解决方案有 IE 问题，替代方法是使用禁用属性：jsfiddle.net/cxZ2H/1/

【讨论】：

在 Firefox 中效果很好，但在 IE 中效果不佳。有什么办法让它在 Internet Explorer 中运行？
@Yoav 是的，这是我的错，IE 不允许 display:none 选项（proof）。替代解决方案使用禁用，如果此解决方案可以吗？这是链接：jsfiddle.net/cxZ2H/1/

【解决方案2】：

这绝对是客户端脚本问题，而不是服务器端 ASP.NET MVC 问题。

这是我的建议：

在服务器端创建您的项目列表。
但是，当您将它带给客户时，请保留一个不可变的主副本。使用它来填充您的第一个 select。
当用户从第一个列表中选择一个项目时，克隆第一个列表，减去所选项目。

这是一个 JSFiddle：http://jsfiddle.net/Fsf7g/1/

【讨论】：