如何使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>