html - Javascript Select Options all at Once

Question

Is it possible to update all options of a <select> element at once?

Depending on a prior option selected, I would like

<select name="area" id="area" size="1" style="width: 150px"></select>

to change to (or something similar depending on the option selected):

<select name="area" id="area" size="1" style="width: 150px">
    <option selected="" disabled="">Select An Area/Resource</option>
    <option value="1">cafe</option>
    <option value="2">lounge</option>
    <option value="3" disabled="">quiet area</option>
    <option value="4">tables</option>
</select>

The block of options is actually stored in a variable as you see them here:

<option selected="" disabled="">Select An Area/Resource</option><option value="1">cafe</option><option value="2">lounge</option><option value="3" disabled="">quiet area</option><option value="4">tables</option>

question from:https://stackoverflow.com/questions/65645725/javascript-select-options-all-at-once

Answer 1

Sure. It's just a matter of changing the .innerHTML of the select element.

const options = '<option selected="" disabled="">Select An Area/Resource</option><option value="1">cafe</option><option value="2">lounge</option><option value="3" disabled="">quiet area</option><option value="4">tables</option>';

const list = document.querySelector("select");

document.querySelector("input").addEventListener("click", function(){
  list.innerHTML = list.innerHTML === "" ? options : "";
});

<input type="checkbox">check or uncheck to change the following list.<br>
<select name="area" id="area" size="1" style="width: 150px"></select>