Динамические выбранные раскрывающиеся зависимости - PullRequest
Новая
       30

Динамические выбранные раскрывающиеся зависимости

0 голосов
/ 25 апреля 2018

Можете ли вы помочь мне, пожалуйста, со следующим:

Мой код: 

<select name="genform[praeferenz_1]" id="genform_praeferenz_1">
<option value="placeholder_1">Bitte wählen...</option>
<option value="rot_1">Rot</option>
<option value="weiss_1">Weiß</option>
<option value="gelb_1">Gelb</option>
<option value="blau_1">Blau</option>
</select><

<select name="genform[praeferenz_2]" id="genform_praeferenz_2">
<option value="placeholder_2">Bitte wählen...</option>
<option value="rot_2">Rot</option>
<option value="weiss_2">Weiß</option>
<option value="gelb_2">Gelb</option>
<option value="blau_2">Blau</option>
</select>

<select name="genform[praeferenz_3]" id="genform_praeferenz_3">
<option value="palceholder_3">Bitte Trikotfarbe wählen...</option>
<option value="rot_3">Rot</option>
<option value="weiss_3">Weiß</option>
<option value="gelb_3">Gelb</option>
<option value="blau_3">Blau</option>
</select>

<select name="genform[praeferenz_4]" id="genform_praeferenz_4">
<option value="placeholder_4">Bitte wählen...</option>
<option value="rot_4">Rot</option>
<option value="weiss_4">Weiß</option>
<option value="gelb_4">Gelb</option>
<option value="blau_4">Blau</option>
</select>

Если вы выбрали опцию, другие опции должны быть удалены.

Пример:

Если я выберу "rot_1" в первом раскрывающемся списке, то rot_2, rot_3, rot_4 не будут доступны в следующих раскрывающихся списках.

Тогда, когда я выберу gelb_2 во втором выпадающем меню.

В следующих выпадающих списках gelb_3 и gelb_4 больше не доступны.

И так далее.

1 Ответ

0 голосов
/ 25 апреля 2018

Пожалуйста, найдите следующий фрагмент согласно вашему требованию. 

$(document).ready(function() {
  $(document).on("change", "select", function() {
    var cur_id = $(this).attr("id");
    var cur_val = $(this).val();
    if (typeof cur_val != 'undefined' && cur_val != '') {
      subs = cur_val.substr(0, cur_val.indexOf('_'));
      $("select[id!='" + cur_id + "']").each(function() {
        $(this).find("option").each(function() {
          //$(this).show();
          var cur_v = $(this).val();
          subst = cur_v.substr(0, cur_v.indexOf('_'));
          if (subs == subst) {
            $(this).hide();
          }
        });
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="genform[praeferenz_1]" id="genform_praeferenz_1">
  <option value="placeholder_1">Bitte wählen...</option>
  <option value="rot_1">Rot</option>
  <option value="weiss_1">Weiß</option>
  <option value="gelb_1">Gelb</option>
  <option value="blau_1">Blau</option>
</select>

<select name="genform[praeferenz_2]" id="genform_praeferenz_2">
  <option value="placeholder_2">Bitte wählen...</option>
  <option value="rot_2">Rot</option>
  <option value="weiss_2">Weiß</option>
  <option value="gelb_2">Gelb</option>
  <option value="blau_2">Blau</option>
</select>

<select name="genform[praeferenz_3]" id="genform_praeferenz_3">
  <option value="palceholder_3">Bitte Trikotfarbe wählen...</option>
  <option value="rot_3">Rot</option>
  <option value="weiss_3">Weiß</option>
  <option value="gelb_3">Gelb</option>
  <option value="blau_3">Blau</option>
</select>

<select name="genform[praeferenz_4]" id="genform_praeferenz_4">
  <option value="placeholder_4">Bitte wählen...</option>
  <option value="rot_4">Rot</option>
  <option value="weiss_4">Weiß</option>
  <option value="gelb_4">Gelb</option>
  <option value="blau_4">Blau</option>
</select>

Метод substr () возвращает часть строки между начальным индексом и количеством символов после него.

Метод indexOf () возвращает индекс в вызывающем объекте String первого вхождения указанного значения, начиная поиск с fromIndex. Возвращает -1, если значение не найдено.

...