时间戳

首页 > 解决方案 > Javascript一次选择所有选项

javascript - Javascript一次选择所有选项

问题描述

<select>是否可以一次更新元素的所有选项？

根据选择的先前选项，我想

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

更改为（或类似的，取决于所选的选项）：

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

正如您在此处看到的那样，选项块实际上存储在一个变量中：

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

标签： javascripthtml

解决方案

当然。这只是改变元素.innerHTML的问题。select

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>

推荐阅读