如何清除表单并将下拉菜单重置为第一个选项？

Question

我有一个表单，其中包含文本字段、下拉菜单、单选按钮和复选框。我能够清除用户输入的所有输入，但现在我需要修改表单，以便当用户单击 "Clear Entries" 时，上述所有字段都将被清除，下拉菜单将 return 到 "PA".

的默认状态

function doClear()
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "";
document.PizzaForm.zip.value = "";
document.PizzaForm.phone.value = "";
document.PizzaForm.email.value = "";

document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;

document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return; 
}

这是 html 表格的样子：

 <form>
  <font size="3">State:</font>
  <select name="State">
    <option selected>PA</option>
    <option value="NJ">NJ</option>
    <option value="NY">NY</option>
    <option value="DE">DE</option>
  </select>
</form>

我收到了 PA select 作为某人的建议，但是，当单击清除条目按钮时它不会 select PA。

Answer 1

更新您的 HTML 以便 PA 选项具有值

<option selected value="PA">PA</option>

添加以下JS:

var elements = document.getElementsByTagName('select');
elements[0].value = 'PA';

获取 select 的更好方法是为其设置一个 ID

HTML

 <select name="State" id="mySelect">

JS

document.getElementByID('mySelect');
element.value = 'PA';

这将防止您添加另一个 select 时遇到的任何问题（除非您添加了另一个具有相同 ID 的 select，无论如何都无效 HTML）

JSFiddle 演示

http://jsfiddle.net/8q6m2aa6/

如何清除表单并将下拉菜单重置为第一个选项？

How do I clear a form and reset a drop down menu to the first option?

javascript

drop-down-menu