If else condition on dropdown list on MVC

Question

I have a two dropdown list on my web application. The populated data of two dropdown comes 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 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
– Francis Fuerte, Commented Jul 24, 2013 at 3:00
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
– Francis Fuerte, Commented Jul 24, 2013 at 3:02
Should this happen immediately and without a post-back? (That would be recommended, 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
– David, Commented Jul 24, 2013 at 3:11

McGarnagle · Accepted Answer · 2013-07-24 03:30:11Z

2

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

Clone the option elements
Add change listener
Re-create options in #2
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

edited Jul 24, 2013 at 3:30

answered Jul 24, 2013 at 3:02

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gerald Over a year ago

This is exactly what I wanted to do. However, my dropdown is not populated by hard coded html so I might do some tweaks with the function. Thanks for this!

Maximum Cookie · Accepted Answer · 2013-07-24 04:07:36Z

1

In order to accomplish 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.net/n5k99/

edited Jul 24, 2013 at 4:07

answered Jul 24, 2013 at 3:43

Maximum Cookie

4273 silver badges6 bronze badges

1 Comment

Gerald Over a year ago

Thanks for this. This is working for me. However, I have a default value for both dropdowns "Select>>" (See update on the question). So when the page loaded, the second dropdown doesn't have the "Select>>" option. Example: JSFiddle

Karsten · Accepted Answer · 2013-07-24 03:26:40Z

0

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.net/tft4t/186/

edited Jul 24, 2013 at 3:26

answered Jul 24, 2013 at 3:17

Karsten

832 silver badges13 bronze badges

Comments

Kaushal De Silva · Accepted Answer · 2013-07-25 03:22:29Z

0

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.

answered Jul 25, 2013 at 3:22

Kaushal De Silva

5923 silver badges8 bronze badges

3 Comments

Gerald Over a year ago

Thanks for the suggestion. However, this is the business requirement that is given to me.

Kaushal De Silva Over a year ago

@Gerald fair enough :)

Gerald Over a year ago

Your suggestion is good. I know it is easier to do rather than doing what I wanted. Its just there are things that we can't control :)

Collectives™ on Stack Overflow

If else condition on dropdown list on MVC

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related