下拉菜单的第一个选项不是选项；强制使用其他选项[重复]

Posted 2023-03-05

【中文标题】下拉菜单的第一个选项不是选项；强制使用其他选项[重复]

【英文标题】：First option of dropdown not an option; force to use other options [duplicate]

【发布时间】：2013-12-06 20:54:51

【问题描述】：

<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 完成吗？

【问题讨论】：

只是好奇，为什么选项之间有换行符？

HTML5 required 属性意味着用户必须选择 some 选项。问题似乎是关于禁止其中一个选项。

@JukkaK.Korpela，是的。我的意思是让选项 A、B 和 C 成为必需选项，但这只是我想要的一个例子。

【参考方案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/

【讨论】：

干杯，我知道有一些简单的解决方案只使用 HTML 而没有 JS。你帮了很多忙！

如果下拉列表未更改，这是否允许提交“选择一个选项”？

刚刚自己测试过了...在 Chrome 版本 68.0.3440.106 中，这允许用户在不对默认选择的选项进行任何更改的情况下仍然提交。

【参考方案2】：

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

<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 />s。

如果 jQuery 不是一个选项，您总是可以在选择中添加 onclick 或在表单中添加 onsubmit 并快速检查空字符串（或任何您设置的默认值）。

【讨论】：

同意@Tieson提到的，那些是select标签内的无效标记

【参考方案3】：

只需将display:none 赋予元素option 和disabled=disabled。感谢@pixshatterer

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

编辑：错误地输入visibility:hidden。

【讨论】：

这不是最好的主意，用户仍然可以选择“选择一个选项作为选项”，如下所示：jsfiddle.net/Xh9nh/2

@agconti，弄错了，检查修改后的答案。把visibility:hidden弄错了。

@Parto。好主意。在第一次单击时效果很好，但如果您继续单击它仍然允许您选择“选择一个选项”。我不知道为什么会这样。

@agconti，如果您使用键盘，它也允许您选择选项。 Hmph 最终使用了 disabled 和 display

好主意和坚持。 +1