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

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

• javascript
• jquery
• html
• select

• can you provide a better example -- your question is not getting good answers because it is not sufficiently clear – Jeff Atwood Commented Sep 14, 2011 at 10:32
• I mean, remove this option when user clicks to open select menu and return back to default state when user closes menu. is it clear? – Tural Ali Commented Sep 14, 2011 at 10:48
• no it is not clear, you should click "edit" to improve and clarify your question with an example. – Jeff Atwood Commented Sep 14, 2011 at 10:50
• updated question. Please take a look – Tural Ali Commented Sep 14, 2011 at 10:54
• Similar question to this, except that question did not want to make the unselectable caption disappear. – smci Commented Nov 18, 2011 at 22:50

2 Answers 2

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.

Something like this?

<form>
<select onchange="document.getElementById('placeholder').disabled=true">
   <option selected="selected" id="placeholder">please select something</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
</form>

In this example, the option remains visible to the user, but is not clickable.