How to hide first item from an Html Select Tag

Question

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.

Answer 1

See if select.remove() method works. It is supposed to be part of w3c standards but not sure if its implemented in all browsers.

Answer 2

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.

Answer 3

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