How To Hide First Item From An Html Select Tag
I have the following code:
Solution 1:
Simply add display:none to the first option. First option will appear only as a "header" of the select box, not in the options anymore. It works on Firefox & Chrome.
<select><optionstyle="display:none;"value="0">Option 0</option>.
<optionvalue="1">Option 1</option><optionvalue="2">Option 2</option></select>Solution 2:
<selectid="selectBox"onFocus="javascript:nullOpt=document.getElementById('nullOpt');
(undefined != nullOpt) ?
document.getElementById('selectBox').removeChild(nullOpt) :
true;"onBlur="javascript:insertBefore(
nullOpt,
document.getElementById('selectBox').firstChild
);"><optionid="nullOpt">Please select...</option><option>val1</option><option>val2</option><option>val3</option></select>EDIT: Added newly requested functionality, sort of.
Solution 3:
hmmmm not sure that editing collections like that is going to work 100% of the time. If you dont supply a value for the select item then you should be able to throw a validation error as no "Value" is selected.
<select>
<option value="">Select a value...</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
then use one of the JQuery validation libraries to validate it.
Post a Comment for "How To Hide First Item From An Html Select Tag"