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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!