I have a two dropdown list on my web application. The populated data of two dropdown es from a database. They contain the same data.

What I want is if one of the list is selected on the first dropdown, it should not be available on the second dropdown anymore.

I have the following razor syntax:

@Html.DropDownListFor(model => model.Questions1, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions1", Name = "Questions1"})

@Html.DropDownListFor(model => model.Questions2, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions2", Name = "Questions2"})

The Questions came from the model which is retrieve from the database.

Thanks in advance!

I have a two dropdown list on my web application. The populated data of two dropdown es from a database. They contain the same data.

What I want is if one of the list is selected on the first dropdown, it should not be available on the second dropdown anymore.

I have the following razor syntax:

@Html.DropDownListFor(model => model.Questions1, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions1", Name = "Questions1"})

@Html.DropDownListFor(model => model.Questions2, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions2", Name = "Questions2"})

The Questions came from the model which is retrieve from the database.

Thanks in advance!

• c#
• javascript
• jquery
• asp-mvc
• razor

• i think you should make an event.. where if one is changed it will remove the item from the other dropdown.. the problem with this is that when you change it again.. the deleted item will not show up anymore – Francis Fuerte Commented Jul 24, 2013 at 3:00
• 1 try creating an event where when you change a selection from the dropdown.. it will automatically check if the current selected item is the same as the one you are selecting.. and thus you can prompt or not accept what the user picked – Francis Fuerte Commented Jul 24, 2013 at 3:02
• Should this happen immediately and without a post-back? (That would be remended, and would probably make this simpler in this case.) You can respond to the change of the select element in JavaScript and remove any matching option from the other select. You'd just want to store the values in another structure as well in order to re-add them when the value changes again. – David Commented Jul 24, 2013 at 3:11
• Yes, it should be done without a post-back – Gerald Commented Jul 24, 2013 at 3:13

4 Answers 4

Not sure if there's a slicker way to do this, but here's what I came up with.

1. Clone the option elements
2. Add change listener
3. Re-create options in #2
4. Remove the one selected in #1 from #2

// save all options locally
var options = $("#Question2 option").clone();

function removeItem() {
    // clear and re-populate all options
    $("#Question2 option").remove();
    $("#Question2").append(options);

    // get the selected option in #1 and remove from #2
    var selected = $("#Question1 :selected").val();
    $("#Question2 option[value='" + selected + "']").remove();
}

// update #2 on startup, and on change
$("#Question1").on("change", removeItem);
removeItem();

Fiddle

In order to acplish this, you will need to store the pool of options in a javascript object. Then, in the 'onchange' event for each drop-down, re-build the options in the other drop-down, excluding the one chosen. Here is an example using jQuery:

// Build a javascript array with all of the select names/values
var options = new Array();
$('#Questions1 option').each(function() {
    $this = $(this);
    options.push({ Name: $this.text(), Value: $this.val() });
});

// Create a function for re-building a select minus the chosen option
var rebuildSelect = function($selOption, $select) {
    $previouslySelected = $select.find(':selected');
    $select.empty();
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];
        if (opt.Value != $selOption.val()) {
            if ($previouslySelected.val() == opt.Value) {
                $select.append('<option value="' + opt.Value + '" selected="selected">' + opt.Name + '</option>');
            }
            else {
                $select.append('<option value="' + opt.Value + '">' + opt.Name + '</option>');
            }
        }
    }
}

// Wire up the event handlers
var $Questions1 = $('#Questions1');
var $Questions2 = $('#Questions2');

$Questions1.change(function() {
    rebuildSelect($(this), $Questions2);
});

$Questions2.change(function() {
    rebuildSelect($(this), $Questions1);
});

// Go ahead and run the function on each box to remove the default entries from the other box
rebuildSelect($Questions1.find(':selected'), $Questions2);
rebuildSelect($Questions2.find(':selected'), $Questions1);

http://jsfiddle/n5k99/

You can use a Jquery function

So if you got 2 dropdowns

<select id="dd1" style="width:200px;">
              <option value="feedback" name="aft_qst">After Quest</option>
              <option value="feedback" name="aft_exm">After Exam</option>
              </select>



<select id="dd2" style="width:200px;">
              <option value="feedback" name="aft_qst">After Quest</option>
              <option value="feedback" name="aft_exm">After Exam</option>
              </select>

Then just add this jQuery

$("#dd1").change(function(){
        $("#dd2").prop("disabled", true);
});

Look here: http://jsfiddle/tft4t/186/

This is not a direct answer, but more an alternative;

Why not keep both options in the drop down list and let the user select the same item, and when they do, display a message like "Please select two different items" etc. ? Your code should be easier too.

If I were a user, and for whatever reason, I wanted to select the same thing twice, I think I would rather the system let me do it and tell me afterwards that I did it wrong, than to try to select the same thing twice and find the item I want in the second drop down is missing, causing me a moment of panic.