How to remove/hide select options from select-list

Question

I've got a select list like this:

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

Unfortunately I can't edit it. Is there any method which let me hide the "Product 4" option by default? I'm trying with CSS, but it doesn't work with IE.

Answer 1

You can hide option using following line include in scripting.

    $("#selectlist option[value='4']").hide();

And if you want to again show this option use following line.

   $("#selectlist option[value='4']").show();

Answer 2

To hide it, wrap it with a span tag.

$( "#selectlist option[value=4]" ).wrap( "<span>" );

To show it, unwrap the span tag if it has one.

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}