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

Question

[Алексей]

Имеется код:

<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?

Answer 1

[0xD34F]

Скрытый выбранный option:

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

https://jsfiddle.net/hb9gz7ft/1/