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

更新（根据评论）

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



                });

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

3 个答案: