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

我有3个下拉菜单,每个下拉菜单包含4个以上的问题作为选项.我要实现的是,当用户从任何下拉列表中选择一个选项时,该特定选项/问题必须在其他2个下拉列表中隐藏,并且当他更改其选择时,该选项/问题必须在其他2个下拉列表中再次显示.他可以从任何下拉菜单中选择问题.这是到目前为止我尝试过的.这段特殊的代码将隐藏select的选项,但是我没有完全看到它.

Java脚本

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-从相同的下拉菜单中更改选项.应该在其他下拉菜单中启用上一个选项.

解决方法:

将重复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

(如果选项有多个不同类,这将不起作用,我将改用通用值或data属性,例如)

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

标签：drop-down-menu,html,javascript,jquery
来源： https://codeday.me/bug/20191121/2051472.html