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>
<option style="display:none;" value="0">Option 0</option>.
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Solution 2:
<select id="selectBox"
onFocus="javascript:nullOpt=document.getElementById('nullOpt');
(undefined != nullOpt) ?
document.getElementById('selectBox').removeChild(nullOpt) :
true;"
onBlur="javascript:insertBefore(
nullOpt,
document.getElementById('selectBox').firstChild
);">
<option id="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">Option 1</option>
<option value="2">Option 2</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"