Как сделать каскадный селект?

Question

[Алексей]

Есть 2 select со значениями, в первом мероприятие, во 2 дата этого мероприятия.
Помогите сделать каскадный селект, то есть: у 1 мероприятия свои даты, у 2 свои, и при выборе каждого во втором select'e были свои определенные даты.

Comments

[Danny Arty]

Вы уже задавали этот вопрос. Причем ни один из правильных ответов не отметили решением

Answer 1

[0xD34F]

<select id="event"></select>
<select id="dates"></select>

const events = [
  { name: '...', dates: [ ... ] },
  { name: '...', dates: [ ... ] },
  ...
];

const eventEl = document.querySelector('#event');
const datesEl = document.querySelector('#dates');

eventEl.innerHTML = events
  .map((n, i) => `<option value="${i}">${n.name}</option>`)
  .join('');

eventEl.addEventListener('change', function() {
  datesEl.innerHTML = events[this.value].dates
    .map(n => `<option>${n}</option>`)
    .join('');
});

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

Answer 2

[Absolute138]

<div class="events-block">
     <select id="events">
       <option value="">Выберите ивент</option>
      <option value="even1" data-dates="1 января 2038г., 18 июля 2073г., 28 мая 2133г.">Мероприятие 1</option>
      <option value="even2" data-dates="31 марта 2031г., 8 июня 2083г., 1 мая 2303г.,30 февраля 2581г.">Мероприятие 2</option>
     </select>
  </div>

document.getElementById('events').addEventListener('change', function(e){
  let option = e.target.options[e.target.selectedIndex];
  let eventDates = document.getElementById('eventDates');
  if('dataset' in option && 'dates' in option.dataset){
    let dateArr = option.dataset.dates.split(',');
    if(eventDates === null){
        eventDates = document.createElement('select');
        eventDates.id = 'eventDates';
        this.after(eventDates);
    }
    while(eventDates.firstChild) {
      eventDates.firstChild.remove();
    }
    let optionDate = document.createElement('option');
    optionDate.textContent = optionDate.value = 'Выберите дату';
    eventDates.appendChild(optionDate);
    dateArr.forEach(v=>{
      let option = document.createElement('option');
      option.textContent = option.value = v.trim();
      eventDates.appendChild(option);
    });
   } else {
     eventDates.remove();
   }
});

Answer 3

[Elvis]

Пользуйтесь поиском
Как сделать последовательные select?