Скрыть или показать меню параметров в зависимости от выбора в меню параметров 1 или 2 - PullRequest
Новая
       1

Скрыть или показать меню параметров в зависимости от выбора в меню параметров 1 или 2

0 голосов
/ 23 марта 2020

У меня есть три варианта выбора. Отображаются два меню параметров, третье будет отображаться при выборе значения в меню параметров NIV 2 .

Мне нужно, чтобы оно работало, когда вы выбираете значение в первом меню параметров NIV 1 , оно изменит второе меню параметров NIV 2 с соответствующим Меню опций. При выборе значения в меню параметров NIV 2 появится третье меню параметров NIV 3 .

Уточнение для NIV 1, 2 и 3:

enter image description here

С помощью моего текущего кода я могу выбрать любое значение в меню параметров 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();
};
<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>

1 Ответ

1 голос
/ 23 марта 2020

Проблема в ваших 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...