Do not show the selected item of first dropdown in second dropdown

Question

I have two dropdownlist which shows places in my asp.net MVC(C#) application.

The First dropdownlist is to show the "From Place" and the second dropdownlist is to show the "To Place".

The list of Places are say like :

 Alabama
 Alaska
 California
 Maryland,.....

The From and To Place dropdownlists contains the above places. When i select a place in the From place dropdownlist, the To place dropdownlist should contain the places other than that selected in the From place dropdownlist.

How can i do it using jquery? or any other effective way to do it?

Answer 1

The easy way is to put them in the update panel, and bind the selectedindexchange event to the FROM PLACE DROPDOWNLIST, when the request is posted to the server remove the listitem of the TO PLACE dropdownlist based on the selected index of the FROM PLACE DROPDOWNLIST. And on the first page visit you can disable the TO PLACES DROPDOWNLIST and force the user to select first from FROM PLACED DROPDOWNLIST.

Answer 2

Hope that helps:

http://codeleacher.wordpress.com/2008/12/09/how-to-addremove-items-from-a-dropdownlist-using-jquery/

Enjoy!

Answer 3

The below code is very useful:

$('#FromPlace').change(function() {
   $('#ToPlace >option').remove();
   var options = '';
   options += '<option value="">' + "--Select Place--" + '</option>';
   $("#FromPlace option").map(function(a, b) {
       b.value != '' && $("#FromPlace option:selected").val() != b.value ? options += '<option value="' + b.value + '">' + b.text + '</option>' : '';
   });
   $("select#ToPlace").html(options);
});