Remove items in drop-down list based on items selected in other drop down lists
<p>I have a number of drop-down lists holding usernames. Each ddl is generated from the same model (They hold the same information).</p>

<p>However, each user should only be selected once within this form. Is there a way to check which users have been selected and stop them from appearing in the drop-down lists, and then re-appear again if the value is removed from a dll.</p>

<p><strong>View</strong></p>

<pre><code>@using (Html.BeginForm("Submit", "Booking", FormMethod.Post))
{
    &lt;div id="modalbox" class="modal"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div id="modal-header" class="modal-header"&gt;
                    &lt;h1&gt;Register New Booking&lt;/h1&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    &lt;table id="booking-model-table" class="table table-condensed table-striped table-bordered"&gt;
                        &lt;tr&gt;
                            &lt;td&gt;Person1:&lt;/td&gt;
                            &lt;td&gt;
                                @{
                                    @Html.DropDownListFor(m =&gt; m.User, Model.UserList, "Select User", new { @class = "form-control", @id = "idP1" })
                                    @Html.HiddenFor(m =&gt; m.SelectedUserText)
                                    @Html.ValidationMessageFor(m =&gt; m.User, "", new { @class = "text-danger" })
                                }
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;Person2:&lt;/td&gt;
                            &lt;td&gt;
                                @{
                                    @Html.DropDownListFor(m =&gt; m.User, Model.UserList, "Select User", new { @class = "form-control", @id = "idP2" })
                                    @Html.HiddenFor(m =&gt; m.SelectedUserText)
                                    @Html.ValidationMessageFor(m =&gt; m.User, "", new { @class = "text-danger" })
                                }
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;Person3:&lt;/td&gt;
                            &lt;td&gt;
                                @{
                                    @Html.DropDownListFor(m =&gt; m.User, Model.UserList, "Select User", new { @class = "form-control", @id = "idP3" })
                                    @Html.HiddenFor(m =&gt; m.SelectedUserText)
                                    @Html.ValidationMessageFor(m =&gt; m.User, "", new { @class = "text-danger" })
                                }
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;Person4:&lt;/td&gt;
                            &lt;td&gt;
                                @{
                                    @Html.DropDownListFor(m =&gt; m.User, Model.UserList, "Select User", new { @class = "form-control", @id = "idP4" })
                                    @Html.HiddenFor(m =&gt; m.SelectedUserText)
                                    @Html.ValidationMessageFor(m =&gt; m.User, "", new { @class = "text-danger" })
                                }
                            &lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;

                    @Html.AntiForgeryToken()
                    &lt;button class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;button class="btn btn-primary" type="submit" value="Submit"&gt;Ok&lt;/button&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
                                    }
</code></pre>

<p><strong>Model</strong></p>

<pre><code>/// &lt;summary&gt;
/// User List
/// &lt;/summary&gt;
[Display(Name = "Users")]
public string User { get; set; }
public IEnumerable&lt;SelectListItem&gt; UserList { get; set; }
public string SelectedUserText { get; set; }
</code></pre>

<p>Would this be possible? I was thinking of adding some javascript to remove the item within an onchange event, but as each ddl runs off the same model I'd imagine it would delete the response.</p>

<p><strong>Update:</strong>
I found a possible solution which works for me at the moment, using Javascript and adding the seat-select value to each drop-down.</p>

<pre><code>@Html.DropDownListFor(m =&gt; m.User, Model.UserList, "Select User", new { @class = "form-control seat-select", @id = "idP1", @onchange = "cleanUsers(this);"
</code></pre>

<p>The Javascript file:</p>

<pre><code>function cleanUsers(ddl) {
var val = ddl.options[ddl.selectedIndex].value;
var vOldVal =   $("#" + ddl.id).attr("data-selected");
                $("#" + ddl.id).attr("data-selected", val);

//If a user is selected disable them
if (val != 0) { $(".seat-select option[value='" + val + "']").attr("disabled", true); }

//If the previous value has been defined, enable the user again 
if (vOldVal != undefined) { $(".seat-select option[value='" + vOldVal + "']").attr("disabled", false); }
</code></pre>

<p>}</p>