下拉的第一个选择不是一个选项; 强制使用其他选项

Question

<select name="name">
    <option>Select an option.</option><br/>
    <option>A</option><br/>
    <option>B</option><br/>
    <option>C</option><br/>
</select>

HTML5有required="required",这是我想要的效果与上面的下拉列表.我不希望用户选择"选择一个选项",只选择"A","B"或"C".我知道我可以设置默认值A并完全删除"选择一个选项"选项,但我不希望用户在不阅读可用选项的情况下随意点击.

可以用HTML和/或JS完成吗？

Answer 1

编辑:此代码仅强制用户选择有效选项,而不是默认选项...应添加提交/更改/等的验证

您应该禁用第一个选项并将其设置为默认选中:

<select name="name">
  <option disabled="disabled" selected="selected">Select an option.</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

这应该是诀窍,这里演示http://jsfiddle.net/pixshatterer/Q27HX/

Answer 2

如果您使用验证插件（此处：http://jqueryvalidation.org/）并更新您的供应<select>，如果选择“空”值，它将阻止表单提交：value<option>

<select name="name" required>
    <option value="">Select an option...</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

还值得注意的是， a 的唯一有效子元素<select>是<optgroup>或<option>，因此请删除这些<br />s 。

如果 jQuery 不是一个选项，您始终可以将 an 添加onclick到选择或将 anonsubmit添加到表单，并快速检查空字符串（或您设置的默认值）。