2013-02-22 17 views
7

Questo è l'esempio su cui sto lavorando: http://jsfiddle.net/4suwY/5/option.style.display = "none" non funziona in Safari

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"; 

Come puoi vedere, funziona in chrome, ma non funziona in safari .. Cosa dovrebbe fare, è nascondere l'opzione "I'm the choose one" quando fai clic sul menu a discesa ..

Questo è un altro test che ho fatto: http://jsfiddle.net/4suwY/11/

Stesso HTML, questo è il 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"; 

Ad ogni modo, quello che devo fare è visualizzare un'opzione come selezionato (corrente), e nascondere al utente quando il menu a discesa è aperto, quindi non può sceglierlo.

Qualche suggerimento/soluzione? Non vedo alcun errore. Cosa c'è di sbagliato in Safari? Dovrei cambiare approccio? Jquery sembra non aiutare.


Modifiche:

ho bisogno di nascondere le opzioni nel DropDownMenu, ma allo stesso tempo ho bisogno di mostrare questa opzione "valore" come valore selezionata! Ad esempio, il menu a discesa "chiuso" mostrerà il valore "I'm THE CHOSEN ONE", ma se clicco e apro il menu, le uniche opzioni visibili saranno "ciao, as, wer, qwe" ..

risposta

19

Non è possibile attivare la visualizzazione degli elementi <option> in Safari (o IE, a tale scopo). Questo fa parte di una lunga e incoerente tradizione con Safari che limita la funzionalità di styling CSS sugli elementi del modulo, ritenendo che il linguaggio visivo degli elementi interattivi debba essere coerente con il sistema operativo (inutile cercare di trovare una motivazione per i difetti di IE).

Le tue uniche opzioni sono di rimuoverlo (e riaggiungerlo in seguito) o di impostarlo su optnz.disabled = true. Scusa per le cattive notizie!

+1

Che mi ha salvato la giornata –

+0

Oppure utilizzare 'visibility: hidden' – JDrake

Problemi correlati