Question

我有多个下拉列表，我loop从database获取值并将其显示在下拉列表中，假设我有四个下拉列表，每个下拉列表包含1到4的值，我需要的是用户选择＆＃34; 1＆＃34;来自＆＃34;下拉1＆＃34;那么其他下降不应该有1个存在，意味着从这四个下降中只选择1个。如果用户选择＆＃34; 4＆＃34;来自＆＃34;下拉2＆＃34;那么其他三个下降将不会有4个，如何从jQuery？

实现此功能

下面的快照将从1到4排名，应该从1到4排名，因此用户可以选择1个项目，而不会从其他项目中选择此项目。

This snapshot will give you proper understanding

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

修改现在看到错误，最后一个下拉列表是空的，它没有显示任何内容。 enter image description here

Answer 1

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

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

jsFiddle

参考文献： .not()， .children()，:contains()，.remove()

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

另一个选项：

如果您不想删除这些选项，并希望随时重置这些选项，则可以隐藏选项，并在重置时显示所有选项。只需添加以下HTML＆amp;代码中的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>元素并切换它们。

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

Fiddle

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

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>

多次下降在一个下拉列表中选择的项目不应该在另一个下拉列表中可用

4 个答案: