Взаимосвязанные Select
Всем привет. Извините за такой детский вопрос, но простого решения в интернете я не смог найти.
Есть два 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 был не активный. Сможет кто помочь? Спасибо за ранее за потраченное на меня время. |
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> |
Часовой пояс GMT +3, время: 09:40. |