Select the menu "fake" option

I wonder if it is possible to show “Choose one” by default as the selected parameter, but hide it from the list of options when the user clicks to open the selection menu? I mean something like a placeholder for a text input field. Is there a way to do this with js or something else? thanks in advance

UPDATE

Let's say we have a selection menu

 <select> <option value"">Select one...</option> <option value"1">Option 1 </option> ... </select> 

What I will do is remove the <option value"">Select one...</option> from the list of options when the user opens the menu and will return to the default state when the user closes the menu.

+6
source share
2 answers

Maybe so:

 <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 a custom tag role="placeholder" must first be placed inside SELECT for proper operation.

+4
source

Something like that?

 <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 parameter remains visible to the user, but not viewable.

+2
source

Source: https://habr.com/ru/post/897307/


All Articles