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

只需将display:none提供给元素option和disabled=disabled即可。感谢@pixshatterer

http://jsfiddle.net/Xh9nh/4/

编辑：错误地提出visibility:hidden。

Answer 3

如果您使用验证插件（此处为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>

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

如果jQuery不是一个选项，您可以随时向表单的select或onclick添加onsubmit并快速检查空字符串（或者设置默认值的任何内容）到）。

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

3 个答案: