javascript - HTML 重置表单，包括选择 ='selected' 的选择元素

Question

我有一个表格页面，顶部的表单中带有 html 过滤器。提交表单后，所选过滤器将应用于 SQL 查询，并且所有过滤器都会在所选值上获得 selected='selected' 。我想要一个重置按钮，将它们重置为选择的第一个值，而不是传入代码中指定的值。

这有意义吗？

例如，如果 HTML 是:

<select name='minTV'>
<option value=0>Min TV 0</option>
<option value=1000>Min TV 1000</option>
<option value=1100>Min TV 1100</option>
<option value=1200>Min TV 1200</option>
<option value=1300 selected='selected'>Min TV 1300</option>
<option value=1400>Min TV 1400</option>
<option value=1500>Min TV 1500</option>
<option value=1600>Min TV 1600</option>
<option value=1700>Min TV 1700</option>
</select>

现在，当我点击重置按钮时，我希望第一个值 value=0 成为所选值，而不是默认情况下的 value=1300。我需要在几个选择框上执行此操作。

有什么想法吗？请尽可能简单。

没有 jQuery，但 Prototype 就可以了。

编辑，回应答案#1:

我似乎无法让这个工作；我的选择是:

<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 >Premiership East</option>
</select>

我的重置按钮是:

<button type="reset"  value="Reset" onclick="return resetAll();">Reset</button>

我的 JavaScript 函数是:

function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
}

有什么想法吗？

Answer 1

您可以为您的选择标签指定一个 id，例如 id="selectbox"然后您可以使用以下 Javascript 代码更改所选值:

document.getElementById('selectbox').selectedIndex = 0;

请注意，您必须输入选项的编号，例如，对于 value=1000，您将输入 selectedIndex = 1;

function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
};

<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 selected>Premiership East</option>
</select>
<button type="reset"  value="Reset" onclick="return resetAll();">Reset</button>

see on JSFiddle.net