jquery – 从dropdownlist帮助器中删除一个元素

我有一个包含两个@ 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,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>

但是,我找不到将它用于我的目的的方法.

解决方法

这样的东西必须适合你：

$(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/