Ocultar un elemento de un select

[godisa]

hola,
tengo el siguiente código.
<select id="select1">
<option value="a">Fruta</option>
<option value="b">Verdura</option>
<option value="c">Otro</option>
</select>


<select id="select2">
<option value="d">Pera</option>
<option value="e">Naranja</option>
<option value="f">Pera</option>
</select>

me gustaria saber si es posible ocultar el elemento f en funcion del elemento que se seleccione en el "select1"
y que el combo que mostrara solo fuera
<select id="select2">
<option value="d">Pera</option>
<option value="e">Naranja</option>
</select>

Gracias

Saludos

[Alexis88]

Sería más sencillo si los valores de las opciones del primer combo estuvieran relacionadas con los de las opciones del segundo combo, de este modo, bastaría con que selecciones una opción en el primer combo, busques entre las opciones del segundo el que coincida con la selección realizada, la guardes en una variable y la retires del segundo combo. Luego, cuando más adelante elijas otra opción, reasignas las opción previamente guardada y separada del segundo combo y, a la que ahora coincida con la nueva selección, la guardas en la variable y la retiras del segundo combo.

Código Javascript:

var select1 = document.querySelector("#select1"),
    select2 = document.querySelector("#select2"),
    options = select2.options,
    aux, total = options.length;
 
select1.addEventListener("change", function(){
    for (var i = 0; i < total; i++){
        if (options[i].value == this.value){
            if (aux) select2.appendChild(aux); //Si aux tiene contenido, lo asigno al select2
            aux = options[i];
            select2.removeChild(options[i]);
            break; //Termino el bucle
        }
    }
}, false);
 

DEMO

Saludos

[GeekGirl]

Fue una equivocación, por favor borren este mensaje