根据选项菜单 1 或 2 中的选择隐藏或显示选项菜单

Question

我有三个选择选项的设置。显示了两个选项菜单，当您在选项菜单NIV 2中选择一个值时，将显示第三个。

我需要它工作的方式是，当您在第一个选项菜单NIV 1中选择一个值时，它将使用匹配的选项菜单更改第二个选项菜单NIV 2 。当您在选项菜单NIV 2中选择一个值时，将显示第三个选项菜单NIV 3。

NIV 1、2 和 3 的说明：

使用我当前的代码，我可以在选项菜单NIV 1中选择任何值，选项菜单NIV 2将相应地更改我在选项菜单NIV 1中选择的值。

问题： 当我在选项菜单NIV 2选项菜单中选择一个值时， NIV 3将正确显示。但是由于某种原因，选项菜单NIV 2消失了。我目前无法找到问题所在。

我当前的代码和实时示例：

$('.selectdata').change(function() {

  var role = $(this).val();

  switchRole(role);

});

function switchRole(role) {

  var sel = $('select[data-role= ' + role + '   ]');

  sel.show();

  hideSelects(role, sel)

};

hideSelects = function(role, selected) {

  var elements = $("select").filter(function() {

    return $(this).data("role") !== undefined;

  });

  var toHide = $(elements).not(selected);

  toHide.hide();

};

Answer 1

问题出在你的hideSelects()功能上。它隐藏了所有不是由函数确定的新选择的值的选择switchRole()。假设您只想隐藏当前选择的同级选择。幸运的是，jQuery 让这一切变得非常简单。在下面的片段中，我替换了：var elements = $("select").filter(function() {和var elements = $(selected).siblings().filter(function() {它似乎按预期工作。这是假设它确实是您想要隐藏的兄弟选择，并且它们将始终是您的 html 中的兄弟。希望有帮助！$('.selectdata').change(function() {&nbsp; var role = $(this).val();&nbsp; switchRole(role);});function switchRole(role) {&nbsp; var sel = $('select[data-role= ' + role + '&nbsp; &nbsp;]');&nbsp; sel.show();&nbsp; hideSelects(role, sel)};hideSelects = function(role, selected) {&nbsp; var elements = $(selected).siblings().filter(function() {&nbsp; &nbsp; return $(this).data("role") !== undefined;&nbsp; });&nbsp; var toHide = $(elements).not(selected);&nbsp; toHide.hide();};<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="card mt-3">&nbsp; <div class="card-body">&nbsp; &nbsp; <div class="form-group row">&nbsp; &nbsp; &nbsp; <label class="col-md-1 m-t-15">Select option:</label>&nbsp; &nbsp; &nbsp; <!-- OPTIE 1 -->&nbsp; &nbsp; &nbsp; <div class="col-md-1" style="max-width: 150px;">&nbsp; &nbsp; &nbsp; &nbsp; <select class="selectdata form-control custom-select" style="width: 100%; height:36px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="Select option NIV 1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="A1">NIV1 A</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="A2">NIV1 B</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="A3">NIV1 C</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <!-- OPTIE 2 -->&nbsp; &nbsp; &nbsp; <div class="col-md-1" style="max-width: 150px;">&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="A1" class="selectdata form-control custom-select" style="width: 100%; height:36px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="Select option NIV 2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B11">A 11</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B12">A 12</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B13">A 13</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="A2" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="Select option NIV 2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B21">A 21</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B22">A 22</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B23">A 23</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="A3" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="Select option NIV 2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B31">A 31</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B32">A 32</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="B33">A 33</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <!-- OPTIE 3 -->&nbsp; &nbsp; &nbsp; <div class="col-md-1" style="max-width: 150px;">&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B11" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 A1 - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 A1 - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 A1 - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B12" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 B - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 B - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 B - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B13" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 C - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 C - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 C - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B21" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 A - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 A - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 A - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B22" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 B - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 B - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 B - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B23" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 C - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 C - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 C - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B31" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 A - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 A - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 A - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B32" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 B - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 B - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 B - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <select data-role="B33" class="form-control custom-select" style="width: 100%; height:36px; display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <optgroup label="OPTION NIV 3">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="1">NIV3 C - 1</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="2">NIV3 C - 2</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="3">NIV3 C - 3</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>