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

【问题标题】：Multiple Drop downs the item which is selected in one drop down should not be available in another drop down多个下拉菜单在一个下拉菜单中选择的项目不应该在另一个下拉菜单中可用
【发布时间】：2015-01-01 10:05:43
【问题描述】：

我有多个下拉列表，我 loop 从 database 获取值并将它们显示到下拉列表中，假设我有四个下拉列表，每个下拉列表包含从 1 到 4 的值，我需要的是如果用户从“下拉 1”中选择“1”，则其他下拉菜单中不应有 1，这意味着从这四个下拉菜单中只选择了 1。如果用户从“下拉 2”中选择“4”，则 4 在其他三个下拉菜单中将不可用，如何从jQuery 实现此功能？

下面的快照会从 1 到 4 排序，应该是从 1 到 4 排序，所以用户可以选择 1 项，而其他项不会被选择。

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

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

【问题讨论】：

为什么您的屏幕截图可能同时在两个下拉列表中显示“4”和“2”，这实际上与您的逻辑相冲突。逻辑是否仅在更改时起作用？
您是要实际删除这些值还是只禁用选定的值，以便稍后在选择更改时启用它们..？
@PrashantKumar 您看到的值是我随机选择的，每个下拉列表包含从 1 到 4 的值，您可以检查小提琴。 jsfiddle.net/husnain/amthbdk3

标签： javascript jquery html drop-down-menu

【解决方案1】：

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

$("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

【讨论】：

有什么具体原因吗？感谢您对错误的解释。
感谢您的代码，但问题是当我选择所有下拉菜单时，它无法正常工作。如果我选择下拉菜单，然后我想重新更改订单，那么它会产生问题，请提出建议。
请解释“它无法正常工作”、“重新更改订单”以及“它会产生问题”。
意思是说它第一次按我的需要工作，当我完成选择时，然后我重新更改值然后它会产生问题，因为@Faruk Omar 包括重置功能，但仍然问题存在，
那么，当您单击重置时，您是否希望每个选择元素都会返回初始值？关于空的选择元素，如果您从一个选择中选择每个选项，那么其他选择元素将是空的不是很明显！

【解决方案2】：

我更喜欢这样做：

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

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

此外，还有一个限制。您必须为每个选择元素加载具有不同值的页面，就像我在下面的小提琴中所做的那样。

Fiddle

previous 变量在更改之前获取选择的旧值，因此您可以使用它来设置与目标选择具有相同值的选择的值。

【讨论】：

您的逻辑非常棒，但代码在我的网站上不起作用。 :(
它不能自己交换请建议？
确保你像我一样在你的选择标签中添加了selectedattribute，仔细看上面的小提琴。
是的，我已经添加了选定的属性，但不起作用。

【解决方案3】：

根据Ashad Shanto cmets的说法，因为你需要在给予一次后重新改变。我给了一个重置框。并禁用而不是删除

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

【讨论】：

不应使用相同的 id 标识两个或多个 HTML 元素。 ID 应该是唯一的。如果您需要一次指向一组元素，则可以使用类。
操作我从 **Revolution refrence 复制了这个 html。好的，我正在编辑

【解决方案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>

【讨论】：