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

Question

我有 3 个下拉菜单，其中包含超过 4 个问题作为每个下拉菜单中的选项。我想要实现的是，当用户从任何下拉列表中选择一个选项时，该特定选项/问题必须从其他 2 个下拉列表中隐藏，并且当他更改他的选择时，该选项/问题必须再次显示在其他 2 个下拉列表中。 他可以从任何下拉列表中选择问题。这是我到目前为止所尝试的。这段特定的代码将隐藏 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>

JSFIDDLE- CLick Here

更新小提琴 Updated

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

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

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

Demo

更新（根据 cmets）

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

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

JSFiddle

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



                });