How to hide first item from an Html Select Tag

I have the following code:

<select>
    <option value="0">Option 0</option>.
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

When you click on select I wish the first item to be no longer listed. Also it must work on all browsers. How can this be done?开发者_开发知识库

Thanks.

---

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>

---

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

---

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.