如何使用按钮重置<select>菜单？

Question

我正在编写一个网页，其中用户将看到一个显示默认文本的菜单（在这种情况下＆＃34;选择基线＆＃34;）。在他们选择其中一个选项后，我需要一个按钮，可以将选择菜单重置为“选择基线”＆＃39;默认。我怎样才能做到这一点？     ＆lt; select onchange =＆＃34; saveSelection（value）＆＃34;＆gt;         ＆lt; option value =＆＃34;＆＃34;已选择已停用隐藏＆gt;选择基准＆lt; /选项＆gt;         ＆lt; option value =＆＃34; A＆＃34;＆gt; A＆lt; / option＆gt;         ＆lt; option value =＆＃34; B＆＃34;＆gt; B＆lt; / option＆gt;         ＆lt; option value =＆＃34; C＆＃34;＆gt; C＆lt; / option＆gt;     ＆LT; /选择＆GT;     ＆lt; button type =＆＃34; button＆＃34;＆gt;重置菜单＆lt; / button＆gt;

Answer 1

您可以在选择中添加ID。然后添加一个函数clearSelection，以便在单击按钮时触发。

function saveSelection(value) {

}

function clearSelection() {
  //This will select the first option of the select
  document.getElementById('select-baseline').options[0].selected = 'selected';
}

<select id='select-baseline' onchange="saveSelection(value)">
  <option value="" selected disabled hidden>Choose Baseline</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
<button type="button" onClick="clearSelection()">Reset menu</button>

Answer 2

将所有这些代码放在form标记内。这样，您就可以将明确功能应用于select代码，并将button类型更改为reset

<form>
    <select>
        ...
    </select>
    <button type="reset">Reset Menu</button> 
</form>

Answer 3

<select id="menu" onchange="saveSelection(value)">
    <option value="" selected disabled hidden>Choose Baseline</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<button type="button" onclick="resetMenu()">Reset menu</button>
<script src="test.js"></script>

的JavaScript

function resetMenu() {
    var element = document.getElementById('menu');
    element.value = '';
 }