Форум

admiral · #1 (**permalink**) 09.02.2020, 15:02

Всем привет. Извините за такой детский вопрос, но простого решения в интернете я не смог найти.
Есть два select,

<select class="add_a_car-select select2-hidden-accessible" data-class="stm_select_overflowed" data-selected="" name="stm_f_s[make]" tabindex="-1" aria-hidden="true">
<option value="" selected="selected">Select Make</option>
......
</select>

и

<select class="add_a_car-select select2-hidden-accessible" data-class="stm_select_overflowed" data-selected="" name="stm_f_s[serie]" tabindex="-1" aria-hidden="true">
<option value="" selected="selected">Select Model</option>
.....
</select>

Нужно что бы пока не был сделан выбор в первом, второй select был не активный. Сможет кто помочь? Спасибо за ранее за потраченное на меня время.

рони · #2 (**permalink**) 09.02.2020, 15:21

admiral,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
document.addEventListener( 'DOMContentLoaded' , function() {
 const on = (parent, event, selector, fn) => parent.addEventListener(event, ({target}) => {
     if(target = target.closest(selector)) fn(target)
 });
 const makeSelector = '[name="stm_f_s[make]"]';
 const make = document.querySelector(makeSelector);
 const serie = document.querySelector('[name="stm_f_s[serie]"]');
 const changeEvent = _ => make.selectedIndex ? serie.removeAttribute('disabled') : (serie.setAttribute('disabled', 'disabled'), serie.selectedIndex = 0);
 changeEvent();
 on(document, 'change', makeSelector, changeEvent);
  });
  </script>
</head>
<body>
<select class="add_a_car-select select2-hidden-accessible" data-class="stm_select_overflowed" data-selected="" name="stm_f_s[make]" tabindex="-1" aria-hidden="true">
<option value="" selected="selected">Select Make</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>

<select  class="add_a_car-select select2-hidden-accessible" data-class="stm_select_overflowed" data-selected="" name="stm_f_s[serie]" tabindex="-1" aria-hidden="true">
<option value="" selected="selected" >Select Model</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript