Option.style.display = "none" does not work in safari

Question

This is an example I'm working on: 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"; 

As you can see, it works in chrome, but it does not work in safari. What he should do is hide the “I AM ONE SELECTED” option when you click the drop-down menu.

This is another test I did: http://jsfiddle.net/4suwY/11/

The same HTML, this is 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"; 

In any case, what I need to do is display the selected option (current) and hide it to the user when the drop-down menu is open, so he cannot select it.

Any suggestion / workaround? I do not see any error. What happened to Safari? Should I change the approach? JQuery doesn't seem to help.

---

edits:

I need to hide the parameters in dropdownmenu, but at the same time I need to show this option "value" as the selected value! For example, in the "closed" drop-down list, the value "I" THE CHOSEN ONE "will be displayed, but if I click and open the menu, the only visible parameters will be" hello, asd, wer, qwe "..

Answer 1

You cannot switch the display of <option> elements in Safari (or IE, for that matter). This is part of a long and inconsistent tradition when Safari restricts the functionality of CSS styles on form elements, believing that the visual language of the interactive elements must be OS-compatible (it makes no sense to try to find justification for IE errors).

Your only options are to either delete it (and add it again later), or set it to optnz.disabled = true . Sorry for the bad news!