Question

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

但是，我无法找到一种方法将它用于我的目的。

Answer 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/

Answer 2

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

以下是我的建议：

创建项目列表服务器端。
但是当你把它带到客户端时，保留一个不可变的主副本。用它来填充您的第一个select。
当用户从第一个列表中选择一个项目时，复制第一个列表，减去所选项目。

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

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

2 个答案: