iOS Fehler? Nicht in der Lage, Text in einer Auswahl zu ändern, wenn mit jQuery

Question

Ich verwende eine Auswahl mit optgroups für einige Navigation auf mobilen Geräten. Ich benutze die optgroup-Bezeichnung, um den Abschnitt anzugeben, in dem es gehört - und dann die Option selbst, um den Unterabschnitt zu bezeichnen.

Das Problem ist, dass in fast jedem Browser ich die OptGroup nicht angezeigt, wenn die Auswahl nicht im Fokus ist. Ich habe das durch Schreiben der folgenden jQuery verstanden:

$(".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); 
}); 

Dies scheint in allem außer iOS zu funktionieren. In iOS spiegelt die Benutzeroberfläche zum Ändern einer Auswahl nicht den neuen Text wider, der für den Fokus verwendet wird. Ich kann sehen, die tatsächliche Auswahl über Apple UI ändern - aber ihre Benutzeroberfläche ändert sich überhaupt nicht.

Jeder hat eine Idee, wie man das macht?

Hier ist es funktioniert, wenn verschwommen:

Und nicht zu arbeiten, wenn konzentriert (ihre UI hat immer noch "Einbrennen> Web", wenn es nur "Web" sagen soll):

---

das hat absolut um einen Fehler sein - wenn Sie nach unten scrollen und dann in der Liste sichern - der Text ist dann verändert - bizarr.

Answer 1

Versuchen Sie das Quickchange-Plugin hier gepostet werden:

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

Nachdem das Plugin-Code in Ihre Javascript-Datei einfügen, sollten Sie in der Lage sein, Ihre onfocus Code zu ersetzen, mit diesem:

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

Und Ihr vorhandener Onblur-Code sollte weiterhin funktionieren, um den Wert zurück zu ändern.