多个下拉菜单在一个下拉菜单中选择的项目不应该在另一个下拉菜单中可用

Question

我有多个下拉菜单，我 loop 从 database 中获取值并将它们显示到下拉菜单中，假设我有四个下拉菜单，每个下拉菜单包含从 1 到4，我需要的是，如果 "drop down 1" 中的用户 select “1”，那么其他下拉列表中不应包含 1，这意味着这四个下拉列表中只有 1 selected 一次.如果 select 来自 "drop down 2" 的用户“4”，那么 4 将不会出现在其他三个下拉列表中，如何从 jQuery 实现此功能？

下面的快照将从 1 到 4 排名，它应该从 1 到 4 排名，因此用户可以 select 1 项并且该项目不会 select 从其他人那里编辑。

您可以在此 jsFiddle 中看到完整的演示。

编辑现在看到错误最后一个下拉列表是空的，它没有显示任何东西。

Answer 1

您需要的是，当您 select 从任何下拉列表中选择任何选项时，您必须从其余列表中删除该选项，但您 select 从中编辑的那个除外。试试这个方法，

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

jsFiddle

参考资料： .not() , .children() , :contains(), .remove()

[注意： 两个或多个元素不应具有相同的 id。在这种情况下，您应该使用 class 。 OP 的标记需要更新。]

另一个选项：

如果您不想删除选项并希望随时重置这些选项，则可以隐藏选项并在重置时显示所有选项。只需在您的代码中添加以下 HTML & jQuery。

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

Answer 2

我更喜欢这样做：

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

每当用户选择一个值时，您 select 具有相同值的 <select> 元素并切换它们。

而且，还有一个限制。您必须为每个 select 元素加载具有不同值的页面，就像我在下面的 fiddle 中所做的那样。

Fiddle

previous变量获取select改变前的旧值，所以你可以用它来设置与你的目标值相同的select的值select.

Answer 3

根据Ashad Shanto评论，由于给过一次需要重新换。我给了一个重置框。并禁用而不是删除

    <!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>

Answer 4

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>

多个下拉菜单在一个下拉菜单中选择的项目不应该在另一个下拉菜单中可用

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

html

javascript

jquery

drop-down-menu