@SPART4K

Как добавить выключенный option в каскадном select'e?

Имеется код:
<select  id="location">
</select>
<select  type="date" id="dateArrival" >  																
</select>

и JS:
const setOptions = (el, data) => el.innerHTML = data.map(n => `<option value="${n}"">${n}</option>`).join('');


const countries = [
  { name: 'Приисковый', location: [ '19.11.2020','20.11.2020','21.11.2020' ] },
  { name: 'Петропавловск-Камчатский', location: [ '28.11.2020','29.11.2020' ] },
  { name: 'Иркутск', location: [ '12.12.2020','13.12.2020' ] },
];


const nameLocation = document.querySelector('#location');
const dateArrival = document.querySelector('#dateArrival');


setOptions(nameLocation, countries.map(n => n.name));

nameLocation.addEventListener('change', function() {
  setOptions(dateArrival, countries.find(n => n.name === this.value).location);
});

nameLocation.dispatchEvent(new Event('change'));

Как добавить сюда выключенные option или placeholder, чтобы выглядело сначала как "Выберите место" в первом select'е и "Выберите дату" во втором, а потом оно пропадало при выборе option?
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
const setOptions = (el, options, placeholder) =>
  el.innerHTML =
    `<option hidden selected>${placeholder}</option>` +
    options.map(n => `<option>${n}</option>`).join('');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 окт. 2020, в 15:42
1000 руб./в час
27 окт. 2020, в 15:30
100000 руб./за проект
27 окт. 2020, в 15:28
100000 руб./за проект