How To Hide First Item From An Html Select Tag

I have the following code: Option 0. Option 1 Optio 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>Copy 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> Copy ​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> Copy then use one of the JQuery validation libraries to validate it. Share Post a Comment for "How To Hide First Item From An Html Select Tag" Top Question Disable Text Entry In

I am making a simple web app. At one part of it, I have inc…