Этот вопрос закрыт для ответов, так как повторяет вопрос Как сделать последовательные select?
@SPART4K

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

Есть 2 select со значениями, в первом мероприятие, во 2 дата этого мероприятия.
Помогите сделать каскадный селект, то есть: у 1 мероприятия свои даты, у 2 свои, и при выборе каждого во втором select'e были свои определенные даты.
  • Вопрос задан
  • 109 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
<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'));
Ответ написан
Пригласить эксперта
Ответы на вопрос 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();
   }
});
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы
22 окт. 2020, в 06:46
3000 руб./за проект
21 окт. 2020, в 22:40
300 руб./за проект
21 окт. 2020, в 22:34
25000 руб./за проект