Esta pregunta ya tiene una respuesta aquí:

Este es el ejemplo en el que estoy trabajando:http://jsfiddle.net/4suwY/5/

HTML:

<select id="asd">
    <option>hello</option>
    <option>I'M THE CHOSEN ONE</option>
    <option>asd</option>
    <option>wer</option>
    <option>qwe</option>
</select>

JS:

var sel = document.getElementById("asd");
var optnz = sel.getElementsByTagName("option")[1];
sel.value = optnz.value;
optnz.style.display = "none";

Como puede ver, funciona en Chrome, pero no funciona en safari. Lo que debería hacer es ocultar la opción "SOY EL ELEGIDO" cuando hace clic en el menú desplegable.

Esta es otra prueba que hice:http://jsfiddle.net/4suwY/11/

Mismo HTML, este es el JS:

var sel = document.getElementById("asd");
var opt = document.createElement("option");
opt.innerHTML = "YAYA";
opt.value = "YAYA";
sel.appendChild(opt);
sel.value = "YAYA";
opt.style.display = "none";

De todos modos, lo que necesito hacer es mostrar una opción como seleccionada (actual) y ocultar al usuario cuando se abre el menú desplegable, por lo que no puede elegirlo.

¿Alguna sugerencia / solución? No veo ningún error. ¿Qué pasa con Safari? ¿Debo cambiar de enfoque? Jquery parece no ayudar.

EDICIONES:

Necesito ocultar las opciones en el menú desplegable, pero al mismo tiempo, debo mostrar esta opción "valor" como el valor seleccionado. Por ejemplo, el menú desplegable "cerrado" mostrará el valor "SOY EL ELEGIDO", pero si hago clic y abro el menú, las únicas opciones visibles serán "hola, asd, wer, qwe" ..