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>

我试图制作＆＃34;田径：＆＃34;不可点击，因此用户必须选择他们的特定运动。帮助表示感谢，谢谢。

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>

It looks like this：

enter image description here

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

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

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

总是总是使用标签，无论如何都是为了便于访问，它通常会改善您的用户界面。

如果您真的只想禁用某个选项，请使用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

Answer 2

添加禁用=＆＃34;禁用＆＃34;属性为此选项

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

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

4 个答案: