如何使HTML下拉选项无法点击

Question

<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>

我试图让“田径运动：”不能点击，所以用户必须选择他们的特定运动。 帮助表示感谢，谢谢。

Answer 1

如果您计划在此下拉列表中添加更多不是“Athlectics”的选项，我认为您在这里寻找的实际上是<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>

它看起来像这样 ：

这对于在下拉列表中对选项组进行分类非常有用。 “Athlectics”不是一个可选择的选择。

否则我认为您应该使用“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
  另外： 禁用属性的正确值

Answer 2

将disabled =“disabled”属性添加到此选项

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

在某些浏览器中它仍然会在第一位，但是第二个选项已经被选中，所以你必须使用javascript来使这个单词可见或者只是放在标签中：

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

Answer 3

您可以这样做，不允许用户选择“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>

Answer 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>