Remove an element from dropdownlist helper

Question

I have a view that contains two @Html.DropDownListFor helpers:

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

They are populated like this:

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();
    }

How can I remove the selected item of the first DDL from the second DDL? I managed to get the selected item using jQuery like this:

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

However, I couldn't find a way to use it for my purpose.

possible duplicate of [How to remove the selected element during a clone() operation](http://stackoverflow.com/questions/2882470/how-to-remove-the-selected-element-during-a-clone-operation) — Jim G., Sep 17 '12 at 18:41

webdeveloper · Accepted Answer · 2012-09-17T22:15:19.907

3

Something like this must work for you:

$(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());
        }
    });
});

Link for demo: jsfiddle.net

Added: Posted solution have problems with IE, alternative way is use disabled attribute: jsfiddle.net/cxZ2H/1/

edited Sep 17 '12 at 22:15

answered Sep 17 '12 at 19:14

webdeveloper

17,174
3
48
47

works great in firefox but not in IE. any way to make it work in internet explorer? – Yoav Sep 17 '12 at 21:43
@Yoav Yes, it is my fault, IE do not allow `display:none` for option ([proof](http://stackoverflow.com/questions/2324250/style-display-none-doesnt-work-on-option-tags-in-chrome-but-it-does-in-firefo) ). Alternative solution use disable, if this solution is ok? Here is link: [jsfiddle.net/cxZ2H/1/](http://jsfiddle.net/cxZ2H/1/) – webdeveloper Sep 17 '12 at 22:08

Jim G. · Answer 2 · 2012-09-17T19:32:04.430

This is definitely a client-side scripting problem as opposed to a server-side ASP.NET MVC problem.

Here is my advice:

Create your item list server-side.
But when you bring it to the client, keep an immutable master copy. Use it to populate your first select.
When the user selects an item from the first list, make a clone of the first list, minus the selected item.

Here's a JSFiddle: http://jsfiddle.net/Fsf7g/1/

Remove an element from dropdownlist helper

2 Answers2