Question

How can i design multiple drop down lists in jquery having common menu
such that when one is asked to select three preferences using three drop down list
then current drop down list should have only those options from the common menu which were not selected previously

Example:
[drop down list 1]……………..[drop down list 2]…………[drop down list 3]
agra:selected………………….delhi…………………………. mathura
delhi………………………………mathura……………………. delhi:selected
mathura…………………………allahabad:selected
allahabad

Answer 1

Well that’s what a multi-select list is for, but if you really want three separate drop-downs here’s a little something I whipped up for you:

var $one = $("#one"),
    $two = $("#two"),
    $three = $("#three"),
    $options = $one.children().clone();

$one.change(function() {
    var oneVal = $one.val(),
        twoVal = $two.val();
    $two.empty()
        .append($options.clone().filter(function(){
                                  return this.value != oneVal; }))
        .children().filter(function(){ return this.value == twoVal; })
        .prop("selected",true);
    $two.change();
});

$two.change(function() {
    var oneVal = $one.val(),
        twoVal = $two.val(),
        threeVal = $three.val();
    $three.empty();
    if (twoVal === "")
        return;        
    $three.append($options.clone().filter(function() {
            return this.value != twoVal && this.value != oneVal;
        }))
        .children().filter(function(){ return this.value == threeVal; })
        .prop("selected",true);
});

Demo: http://jsfiddle.net/G89m2/

This assumes you have html something similar to in my demo, i.e., with the available options defined in the first drop-down.

Some browsers don’t let you use CSS to hide option elements, so the approach I’ve taken is when the selection changes in the first drop-down it removes the options from the second and third and puts back just the ones that are different. If there was a previous selection in the second and third it restores it if it is still available.