Multiple Drop downs the item which is selected in one drop down should not be available in another drop down

1
votes

I have multiple drop downs on which I loop to get the values from database and display them into the drop down, suppose I have four drop downs each drop down contains values from 1 to 4, what I need is if user select "1" from "drop down 1" then other drop downs should not have 1 present in it, means only 1 is selected once from these four drop downs. If user select "4" from "drop down 2" then 4 will not be available in other three drop downs, How can I achieve this functionality from jQuery?

The snapshot below will be ranking from 1 to 4 it should be ranked from 1 to 4, so user can select 1 item and this item will not be selected from others.

This snapshot will give you proper understanding

You can see a full demo in this jsFiddle.

Edit See the error now the last dropdown is empty, its not showing any thing. enter image description here

4
javascriptjqueryhtmldrop-down-menu
How come it's possible that your screenshot showing '4' and '2' in two dropdowns at the same time which infact conflict your logic.. Will the logic work only on change? - Prashant Kumar
Do you want to actually remove the values or just disable the selected values so that they can be enabled later if the selection changes..? - T J
@PrashantKumar the values that you seen are randomly selected by me, each drop down contains values from 1 to 4, you can check the fiddle. jsfiddle.net/husnain/amthbdk3 - Husnain Aslam

4 Answers

1
votes

What you need is that when you select any option from any of your dropdownlists you'll have to remove that option from the rest of the lists except the one you selected from. Try this way,

$("select").on("change", function(){
    $("select").not(this).children("option:contains(" + $(this).val() + ")").remove();
});

jsFiddle

References : .not() , .children() , :contains(), .remove()

[Note : No two or more elements should have same id. In such situation you should use class . OP's markup need to be updated.]

Another Option :

If you don't want to remove the options and want to reset these whenever you want then you can hide the options and on reset show them all. Simply add the following HTML & jQuery in your code.

HTML : 

// reset button
<button id="resetddls">Reset</button>

jQuery : 

// here you are hiding the selected option from rest of the ddls not removing.
$("select").on("change", function(){
    $("select").not(this).children("option:contains(" + $(this).val() + ")").hide();
});

$("#resetddls").on("click", function(){
    $("select option").show();
});

jsFiddle

0
votes

I ll prefer doing it this way : 

$("select").on('focus', function () {
    previous = this.value;
    }).change(function() {
         $("select[value="+$(this).val()+"]").not(this).val(previous);
    });

Whenever the user choose a value, you select the <select> element with the same value and switch them.

Moreover, there is a restriction. You have to load the page with distinctive values for each select element as I did in the fiddle below.

Fiddle

The previous variable gets the old value of the select before change, so you can use it to set the value of the select which have the same value as your target select.

0
votes

Since you need to re change after giving once , according to Ashad Shanto comments . I gave a reset box. And disabled instead of remove 

    <!DOCTYPE html>
<html>
    <body>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <div class="questions">
            <input type="hidden" name="questions[9][id]" value="85" class="ui-wizard-content">
            <input type="hidden" name="questions[9][option_type]" value="dropdown" class="ui-wizard-content">
            <h3>Question 10</h3>

            <p></p><p>this is an example question for testing rankings.&nbsp;</p>
            <p><input type="checkbox" id="resetoption" /> Reset Option</p>
            <div class="checkbox" id="">
                <label>
                    <input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="372">
                    Rank1                                            </label>
                <select style="width: 200px" class="ui-wizard-content valid">

                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div class="checkbox" id="">
                <label>
                    <input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="373">
                    Rank2                                            </label>
                <select style="width: 200px" class="ui-wizard-content valid">

                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div class="checkbox" id="">
                <label>
                    <input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="374">
                    Rank3                                            </label>
                <select style="width: 200px" class="ui-wizard-content valid">

                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div class="checkbox" id="">
                <label>
                    <input type="checkbox" checked="checked" onclick="return false" class="required ui-wizard-content" name="questions[9][option]" value="375">
                    Rank4                                            </label>
                <select style="width: 200px" class="ui-wizard-content valid">

                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

        </div>

        <script>
            $('#resetoption').on('click', function () {
            if ($(this).is(':checked')) {
                    $("select").children("option").removeAttr("disabled");
                }
            });

                $("select").on('change', function () {
                $("select").not(this).children("option:contains(" + $(this).val() + ")").attr('disabled', 'disabled');

            });

        </script>

    </body>
</html>
-1
votes

maintain one array which are got selected already in angularjs

     <select ng-model="obj.subject" on-change="selectedItem(obj.subject)">
    <option value=""></option>
    <option ng-if="selectedArray.indexOf(obj.id)===-1||obj.id === obj.subject" ng- 
     repeat="obj in list" 
       value="{{obj.id}}">{{obj.subject}} 
    </option>
    </select>
    <select ng-model="obj.subject1" on-change="selectedItem(obj.subject)">
    <option value=""></option>
    <option ng-if="selectedArray.indexOf(obj.id)===-1||obj.id === obj.subject1"
    ng-repeat="obj in list" value="{{obj.id}}">{{obj.subject}}</option>
    </select>
   <select ng-model="obj.subject2" on-change="selectedItem(obj.subject)">
    <option value=""></option>
    <option ng-if="selectedArray.indexOf(obj.id)===-1||obj.id === obj.subject2"
    ng-repeat="obj in list" value="{{obj.id}}">{{obj.subject}}</option>
    </select>

   <script>
   $scope.list = [
    {
      id:1,
      subject:"physics"
    },
    {
      id:2,
      name:"chemistry"
    },
    {
      id:3,
      name:"maths"
    }

   ];
    $scope.obj = {};
    $scope.selectedArray = [];
    $scope.selectedItem = function (){
     $scope.selectedArray = [];
     $scope.selectedArray.push(obj.subject);
     $scope.selectedArray.push(obj.subject1);
     $scope.selectedArray.push(obj.subject2);
    }
   </script>