How can I add a disabled option in a cascading select?

• 0
  There is a code:
  

  <select  id="location">
  </select>
  <select  type="date" id="dateArrival" >  																
  </select>

  
  and 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'));

  
  How can I add a disabled option or placeholder here, so that at first it looks like "Select a place" in the first select and "Select a date" in the second, and then it disappeared when the option was selected?

  JavaScript Mia Greer, Dec 9, 2019

---

1 Answers
• 0

  const setOptions = (el, options, placeholder) =>
  
    el.innerHTML =
  
      `<option hidden selected>${placeholder}</option>` +
  
      options.map(n => `<option>${n}</option>`).join('');

  Anonymous

---