使用jQuery在下拉菜单中显示/隐藏选项

Question

我有3个下拉菜单，每个下拉菜单中都包含超过4个问题选项。我想要实现的是，当用户从任何一个下拉菜单中选择一个选项时，该特定选项/问题必须从其他2个下拉菜单中隐藏，并且当他更改选择时，该选项/问题必须再次显示在其他2个下拉菜单中。他可以从任何下拉菜单中选择问题。这是我到目前为止尝试过的。这段代码将在选择时隐藏选项，但我不知道如何确切地将其重新显示出来。

Javascript

var removeSelection = function (select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
    var index = select.find(':selected').index();
    $(this).find('option:eq(' + index + ')').hide();
});
};

$(function () {
    $('select').change(function () {
        removeSelection($(this));
    });
});

HTML

<form id="form1">
 <select id="select1">
     <option id="selectOpt1">Question 1</option>
     <option id="selectOpt2">Question 2</option>
     <option id="selectOpt3">Question 3</option>
     <option id="selectOpt4">Question 4</option>
 </select>

    <select id="select2">
        <option id="selectOpt1">Question 1</option>
        <option id="selectOpt2">Question 2</option>
        <option id="selectOpt3">Question 3</option>
        <option id="selectOpt4">Question 4</option>
    </select>

    <select id="select3">
        <option id="selectOpt1">Question 1</option>
        <option id="selectOpt2">Question 2</option>
        <option id="selectOpt3">Question 3</option>
        <option id="selectOpt4">Question 4</option>
    </select>



</form>

JSFIDDLE- 点击此处

更新的 Fiddle 已更新

场景1 - 从任何一个下拉列表中选择一个选项，该选项应从其他下拉列表中被禁用。 场景2 - 在同一下拉列表中更改选项。先前的选项应在其他下拉列表中启用。

- Guruprasad J Rao

---

你可以使用禁用它们的方式，而不是隐藏它们。 - Shah Rukh

@Kaushik，您无法隐藏select > option。您只能将其禁用。 - prakashstar42

id 应该是唯一的。请使用 class 代替。 - Gaurav

@ShahRukh.. 两者都可以，我不介意禁用。但是当选项从父级下拉菜单更改时，我卡在启用相同选项上了。 - Guruprasad J Rao

我能够在你的演示中选择所有三个下拉框中的相同选项。 你有检查它是否正常工作吗？ - T J

@TilwinJoy，是的，它之前一直运行良好... :o - Guruprasad J Rao

Answer 1

一旦您将重复的 id 更改为常见类，您可以尝试类似以下的操作。

$('select').change(function () {
    $("option:disabled").prop("disabled",false); // reset the previously disabled options
    var $selectedQ = $(this).find("option:selected"); // selected option
    var commonClass= $selectedQ.attr("class"); // common class shared by the matching options
    $("."+commonClass).not($selectedQ).prop("disabled","disabled"); // disable the matching options other than the selected one
});

更新的Fiddle

(如果选项有多个不同的类，则此方法将无法正常工作，建议使用共同的值或数据属性，例如：)

$('select').change(function () {
  $("option:disabled").prop("disabled", false);
  var $selectedQ = $(this).find("option:selected")
  var value = $selectedQ.val();
  $("option[value='" + value + "']").not($selectedQ).prop("disabled", "disabled");
});

演示

更新（根据评论）

$('select').change(function () {
  var prevMatches = $(this).data("prevMatches");
  if (prevMatches) prevMatches.prop("disabled", false)
     var $selectedQ = $(this).find("option:selected")
  var value = $selectedQ.val();
  var $matches = $("option[value='" + value + "']").not($selectedQ);
  $matches.prop("disabled", "disabled");
  $(this).data("prevMatches", $matches);
});

Demo

- T J

---

嘿Tilwin.. 在我从其他下拉列表中选择另一个选项后，这将启用第一个选定的选项... - Guruprasad J Rao

@Kaushik，我看到了你对另一个答案的评论，你想让它像这样吗？ - T J

翻译：正确率达到75％。但在某些时候，它仍无法启用其他选项。让我向您展示如何操作！从第一个下拉菜单中选择问题3。 从第二个下拉菜单中选择问题4。 从第三个下拉菜单中选择问题2。现在，所有下拉菜单都将启用问题1作为选项。如果我在第三个下拉菜单中选择问题1，则应为所有下拉菜单启用问题2。这就是我想要的。 - Guruprasad J Rao

太好了，这正是我想要的。非常感谢您的回答.. :) - Guruprasad J Rao

Answer 2

你可以这样做：

var removeSelection = function (select) {
var id=select.attr("id");
$(".hide-"+id).show();
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
    var index = select.find(':selected').index();

    $(this).find("option").removeClass("hide-"+id);
    $(this).find('option:eq(' + index + ')').each(function(){
    if($(this).attr("id")!="selectOpt1"){
        $(this).addClass("hide-"+id);
    }
});
});
$(".hide-"+id).hide();

};

$(function () {
    $('select').change(function () {
    removeSelection($(this));
    });
});

{{链接1：JSFiddle}}

- HowieH

---

这部分符合我的要求。首先，如果我从第一个下拉列表中选择问题3，则它将从其他2个下拉列表中删除。然后，如果我从第二个下拉列表中选择问题2和第三个下拉列表中的问题4，则问题1必须始终存在于所有下拉列表中。当我再次在第一个下拉列表中选择问题1时，第一个选择的选项问题3将不会再次显示在其他2个下拉列表中... - Guruprasad J Rao

好的，我没有从问题中得到那个，现在已经更新为始终显示选项1。 - HowieH

不不不，你弄错了。让我更新一下我的代码示例，然后给你解释一下情景。问题1不是默认选项。假设我在第一个下拉菜单中有一个选项为“选择问题”，每个下拉菜单中有4个问题。情景1 - 在任何一个下拉菜单中选择的选项应该在其他下拉菜单中被禁用。 情景2 - 如果选择发生变化，它也应该在其他下拉菜单中重新启用。希望你明白了。 - Guruprasad J Rao

Answer 3

看一下

               <form id="form1">
        <select id="select1">
         <option     value="Question1">Question 1</option>
            <option value="Question2" >Question 2</option>
            <option  value="Question3"  >Question 3</option>
            <option  value="Question4"  >Question 4</option>
        </select>
<select id="select2">
         <option     value="Question1">Question 1</option>
            <option value="Question2" >Question 2</option>
            <option  value="Question3"  >Question 3</option>
            <option  value="Question4"  >Question 4</option>
        </select>

    <select id="select3">
         <option     value="Question1">Question 1</option>
            <option value="Question2" >Question 2</option>
            <option  value="Question3"  >Question 3</option>
            <option  value="Question4"  >Question 4</option>
        </select>




     </form>





               $(document).on('change','select',function(e){
                     var elm = $(this);
                     elm.find('option').show();
                     $('select').not(elm).find('option',each(function(){
                        if($(this).attr('value')==$(elm).val()){
                             $(this).hide();
                         }else{
                                 $(this).show();
                         }
                     }));



                });

- Vicky