Javascript 使用jQuery显示/隐藏下拉列表中的选项

我有3个下拉列表，每个下拉列表中包含4个以上的问题作为选项。我想实现的是，当用户从任何下拉列表中选择一个选项时，该特定选项/问题必须从其他两个下拉列表中隐藏，当用户更改其选择时，该选项/问题必须在其他两个下拉列表中再次显示他可以从任何下拉列表中选择问题。这是我到现在为止一直在尝试的。这段特殊的代码将隐藏select上的选项，但我不知道如何准确地显示它

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>

问题1
问题2
问题3
问题4
问题1
问题2
问题3
问题4
问题1
问题2
问题3
问题4

JSFIDDLE-

更新的小提琴

场景1-从任何下拉列表中选择一个选项。应从其他下拉列表中禁用该选项。 场景2-从同一下拉列表中更改选项。应在其他下拉列表中启用“上一个”选项。

请查看

               <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();
                         }
                     }));



                });

问题1
问题2
问题3
问题4
问题1
问题2
问题3
问题4
问题1
问题2
问题3
问题4
$（文档）.on（'change'，'select'，函数（e）{
var elm=$（本）；
elm.find（'option'）.show（）；
$（'select'）.not（elm）.find（'option'，each（function）（）{
if（$（this.attr（'value'）==$（elm.val（））{
$（this.hide（）；
}否则{
$（this.show（）；
}
}));
});

一旦您将重复的

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
});

（如果选项有多个不同的类，这将不起作用，我将使用公共值或数据属性，如）

更新（根据评论）

---

您可以这样做：

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();

})

---

您可以使用来禁用它们，而不是hide@Kaushik不能隐藏选择>选项。您只能禁用它。

id

应该是唯一的。改用

class

。@ShahRukh。。他们两个都可以。。我没有禁用的问题。当父下拉列表中的选项被更改时，我一直坚持启用相同的选项。我能够在演示的所有3个下拉列表中选择相同的选项。你能检查一下它是否工作吗？这部分符合我的要求。首先，如果我从第一个下拉列表中选择问题3，它将从其他2中删除。然后，如果我从第二个下拉列表中选择问题2，从第三个下拉列表中选择问题4，则所有下拉列表中必须始终存在问题1。当我在第一个下拉列表中再次选择问题1时，第一个选择的选项问题3将不会在其他两个下拉列表中再次显示…好的，我没有从问题中得到答案，现在它已更新为始终显示选项1。不，不，你弄错了。让我更新我的小提琴，让你解释一下这个场景。问题1不是默认的。假设我有第一个选项-选择问题-。每个下拉列表中有4个问题。场景1-在任何下拉列表中选择的一个应在其他下拉列表中禁用。场景2-如果选择被更改，则还应在其他下拉列表中启用该选项。。希望你明白了嘿Tilvin。。在我从“其他”下拉列表中选择一个选项后，这将启用第一个选择的选项…@Kaushik我读了你对另一个答案的评论，你希望它像？好的，75%正确。不过，它在某个时间点上不会启用其他选项。让我告诉你怎么做！从第一个下拉列表中选择问题3。从第二个下拉列表中选择问题4。从第三个下拉列表中选择问题2。现在，所有下拉列表都将问题1设置为启用选项。如果我在第三个下拉列表中选择问题1。问题2：所有下拉列表都不能启用。这就是我想要的。宾果。。甚至这也正是我想要的。非常感谢您的回答：）

$('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);
});

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));
    });
});