根据选项菜单 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() {

  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 = $(selected).siblings().filter(function() {

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

  });

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

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

  <div class="card-body">

    <div class="form-group row">

      <label class="col-md-1 m-t-15">Select option:</label>

      <!-- OPTIE 1 -->

      <div class="col-md-1" style="max-width: 150px;">

        <select class="selectdata form-control custom-select" style="width: 100%; height:36px;">

          <optgroup label="Select option NIV 1">

            <option value="A1">NIV1 A</option>

            <option value="A2">NIV1 B</option>

            <option value="A3">NIV1 C</option>

          </optgroup>

        </select>

      </div>

      <!-- OPTIE 2 -->

      <div class="col-md-1" style="max-width: 150px;">

        <select data-role="A1" class="selectdata form-control custom-select" style="width: 100%; height:36px;">

          <optgroup label="Select option NIV 2">

            <option value="B11">A 11</option>

            <option value="B12">A 12</option>

            <option value="B13">A 13</option>

          </optgroup>

        </select>

        <select data-role="A2" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="Select option NIV 2">

            <option value="B21">A 21</option>

            <option value="B22">A 22</option>

            <option value="B23">A 23</option>

          </optgroup>

        </select>

        <select data-role="A3" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="Select option NIV 2">

            <option value="B31">A 31</option>

            <option value="B32">A 32</option>

            <option value="B33">A 33</option>

          </optgroup>

        </select>

      </div>

      <!-- OPTIE 3 -->

      <div class="col-md-1" style="max-width: 150px;">

        <select data-role="B11" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 A1 - 1</option>

            <option value="2">NIV3 A1 - 2</option>

            <option value="3">NIV3 A1 - 3</option>

          </optgroup>

        </select>

        <select data-role="B12" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 B - 1</option>

            <option value="2">NIV3 B - 2</option>

            <option value="3">NIV3 B - 3</option>

          </optgroup>

        </select>

        <select data-role="B13" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 C - 1</option>

            <option value="2">NIV3 C - 2</option>

            <option value="3">NIV3 C - 3</option>

          </optgroup>

        </select>

        <select data-role="B21" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 A - 1</option>

            <option value="2">NIV3 A - 2</option>

            <option value="3">NIV3 A - 3</option>

          </optgroup>

        </select>

        <select data-role="B22" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 B - 1</option>

            <option value="2">NIV3 B - 2</option>

            <option value="3">NIV3 B - 3</option>

          </optgroup>

        </select>

        <select data-role="B23" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 C - 1</option>

            <option value="2">NIV3 C - 2</option>

            <option value="3">NIV3 C - 3</option>

          </optgroup>

        </select>

        <select data-role="B31" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 A - 1</option>

            <option value="2">NIV3 A - 2</option>

            <option value="3">NIV3 A - 3</option>

          </optgroup>

        </select>

        <select data-role="B32" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 B - 1</option>

            <option value="2">NIV3 B - 2</option>

            <option value="3">NIV3 B - 3</option>

          </optgroup>

        </select>

        <select data-role="B33" class="form-control custom-select" style="width: 100%; height:36px; display: none;">

          <optgroup label="OPTION NIV 3">

            <option value="1">NIV3 C - 1</option>

            <option value="2">NIV3 C - 2</option>

            <option value="3">NIV3 C - 3</option>

          </optgroup>

        </select>

      </div>

    </div>

  </div>

</div>