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

I'm trying to make "Athletics:" NOT click-able, so users have to choose their specific sport. Help appreciated, thanks.

Answer 1

If you plan on adding more options to this dropdown that aren't "Athlectics", I think what you may be looking for here is actually <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 :

This is useful for categorizing groups of options in a dropdown. "Athlectics" will not be a selectable option.

Otherwise I think you should just use "Athlectics" as the label for this field and remove it from the options:

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

You should always use a label anyways for accessibility purposes, and it generally improves your UI.

If you really just want to disable an option, use the disabled attribute:

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

Reference:

• <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 attribute: http://www.w3.org/TR/html5/disabled-elements.html
  Also: Correct value for disabled attribute

Answer 2

add disabled="disabled" attribute to this option

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

in some browsers it will be still on the 1st place, but 2nd option will be selected already, so you have to use javascript to make this word visible or just put in the label:

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

Answer 3

You could do this which would not allow users to select "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>

Or you could do this and add a label

<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

Another solution work for me is:

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