Bug iOS? Impossibile modificare il testo in una selezione quando focalizzato utilizzando jQuery

Question

Sto utilizzando una selezione con optgroups per la navigazione su dispositivi mobili. Uso l'etichetta dell'optgroup per indicare la sezione a cui appartiene - e poi l'opzione stessa per designare la sottosezione.

Il problema è che in quasi tutti i browser in cui mi imbatto non viene visualizzato l'optgroup quando la selezione non è a fuoco. Ho risolto questo problema scrivendo il seguente jQuery:

$(".Nav-Interior-Mobile select option:selected").each(function() { 
    pageGroupLabel = $(this).parent('optgroup').attr('label'); 
    pageItemLabel = $(this).text(); 
    $(this).text(pageGroupLabel + " > " + pageItemLabel); 
}); 
$('.Nav-Interior-Mobile select').focus(function() { 
    $(this).find('option:selected').text(pageItemLabel); 
}); 
$('.Nav-Interior-Mobile select').blur(function() { 
    $(this).find('option:selected').text(pageGroupLabel + " > " + pageItemLabel); 
}); 

Questo sembra funzionare in tutto tranne iOS. In iOS l'interfaccia utente per modificare una selezione non riflette il nuovo testo che viene utilizzato in primo piano. Riesco a vedere l'effettiva selezione sopra l'interfaccia utente di Apple, ma la loro interfaccia utente non cambia affatto.

Qualcuno ha un'idea di come farlo?

Qui si sta lavorando quando offuscata:

E non funziona quando è focalizzato (la loro interfaccia utente ha ancora "Branding> Web" quando si deve solo dire "Web"):

---

Questo deve essere assolutamente un errore - se si scorre verso il basso e quindi si fa il backup nell'elenco - il testo è quindi cambiato - bizzarro.

Answer 1

Provate ad usare il plugin QuickChange postato qui:

Strange behavior of select/dropdown's onchange() JS event when using 'Next' on Mobile Safari Dropdown list item select box

Dopo aver incollato il codice del plugin nel file Javascript, si dovrebbe essere in grado di sostituire il codice onfocus con questo:

$('.Nav-Interior-Mobile select').quickChange(function() { 
    $(this).find('option:selected').text(pageItemLabel); 
}); 

E il tuo codice onblur esistente dovrebbe continuare a funzionare per modificare il valore.