如何使 HTML 下拉选项不可点击

Posted 2023-05-07

【中文标题】如何使 HTML 下拉选项不可点击

【英文标题】：How to make an HTML dropdown option not clickable

【发布时间】：2014-07-22 02:55:51

【问题描述】：

<form action="submit.php" method="post">
<select name="input"> 
<option value="Athletics:">Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>

我正在尝试制作“Athletics：”不可点击，因此用户必须选择他们的特定运动。感谢帮助，谢谢。

【问题讨论】：

如果您不想选择该选项，请将其删除

【参考方案1】：

如果您打算在此下拉列表中添加更多非“竞技”选项，我想您可能在这里寻找的实际上是 <optgroup>：

<select>
  <option value=""></option>
  <optgroup label="Athlectics">
   <option value="Running">Running</option>
   <option value="Paragliding">Paragliding</option>
   <option value="Swimming">Swimming</option>
  </optgroup>
</select>

It looks like this:

这对于在下拉列表中对选项组进行分类很有用。 “竞技”将不是一个可选选项。

否则我认为您应该只使用“Athlectics”作为该字段的标签并将其从选项中删除：

<label>Athlectics: <select>...</select></label>

您应该始终出于可访问性目的使用标签，这通常会改善您的 UI。

如果您真的只想禁用某个选项，请使用disabled 属性：

<option value="Athletics:" disabled>Athletics:</option>

参考：

<optgroup>：https://developer.mozilla.org/en-US/docs/Web/html/Element/optgroup <label>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label disabled 属性：http://www.w3.org/TR/html5/disabled-elements.html 另外：Correct value for disabled attribute

【讨论】：

<option value=""></option> 显示空选择，这对大多数用户来说不是一个好主意，它看起来像损坏的表单

@vladkras 显示没有默认值的下拉列表的首选方式是什么？如果没有空选项，则在页面加载时已经选择了“正在运行”。

我认为我们的目标只是向用户展示这个下拉列表是用于选择运动类型，而不是用于分类、分组等。显示空下拉列表是相反的。

空选项对于答案来说不是必需的，我总是使用一个，因为我认为最好让用户明确填写字段而不是意外提交默认值。

@vladkras 我认为如果 OP 想要添加更多组或非田径选项，那么optgroup 是一种方式，但如果这肯定是唯一的组，那么将“田径”作为<label> 这个字段更好。

【参考方案2】：

您可以这样做，但不允许用户选择“Alhletics”

<form action="submit.php" method="post">
<select name="input"> 
<option value="Athletics:" disabled>Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>

或者你可以这样做并添加一个标签

<form action="submit.php" method="post">
<label for="input">Athletics</label>
<select name="input"> 
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select> 
<input type="Submit" value="Next">
</form>

【参考方案3】：

为该选项添加 disabled="disabled" 属性

<option value="Athletics:" disabled="disabled">Athletics:</option>

在某些浏览器中，它仍然位于第一个位置，但已经选择了第二个选项，因此您必须使用 javascript 使该单词可见或只是放入标签中：

<label>Athletics:<select> ...[all other options]... </select></label>

【参考方案4】：

对我来说另一个解决方案是：

<select name="input" onmousedown="function()return false;"> 
<option value="Athletics:">Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select>