I wonder, is it possible to show "Select one" by default as selected option but hide from options list when user clicks to open select menu? I mean, something like placeholder
for text input field. Is there anyway to do it with js or something else? Thanks in advance
UPDATE
Lets say we have select menu
<select>
<option value"">Select one...</option>
<option value"1">Option 1 </option>
...
</select>
What i'm gonna do is, remove <option value"">Select one...</option>
from options list when user opens menu, and return back to default state when user closes menu.
Maybe like this:
<SELECT NAME="browser" VALUE=""
onchange="var opt=this.options[0];if(opt.getAttribute('role')==='placeholder'&&!opt.selected)opt.parentNode.removeChild(opt);">
<option role="placeholder" value="">Which Web browser do you use most often?</option>
<OPTGROUP LABEL="Firefox">
<OPTION LABEL="2.0 or higher">
Firefox 2.0 or higher
</OPTION>
<OPTION LABEL="1.5.x">Firefox 1.5.x</OPTION>
<OPTION LABEL="1.0.x">Firefox 1.0.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION LABEL="7.0 or higher">
Microsoft Internet Explorer 7.0 or higher
</OPTION>
<OPTION LABEL="6.x">Microsoft Internet Explorer 6.x</OPTION>
<OPTION LABEL="5.x">Microsoft Internet Explorer 5.x</OPTION>
<OPTION LABEL="4.x">Microsoft Internet Explorer 4.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION LABEL="9.0 or higher">Opera 9.0 or higher</OPTION>
<OPTION LABEL="8.x">Opera 8.x</OPTION>
<OPTION LABEL="7.x">Opera 7.x</OPTION>
</OPTGROUP>
<OPTION>Safari</OPTION>
<OPTION>Other</OPTION>
</SELECT>
OPTION
with custom tag role="placeholder"
must placed first inside SELECT
to work properly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With