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

Guruprasad J Rao 发表于 Dev

古鲁帕萨德·饶

我有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- 单击此处

更新小提琴 更新

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

更新小提琴

（如果选项有多个不同类，则此方法不起作用，我将使用通用值或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");
});

演示版

更新（根据评论）

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

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。