Błąd iOS? Nie można zmienić tekstu zaznaczenia, gdy jest on skupiony za pomocą jQuery

Question

Używam opcji select with optgroups do nawigacji na urządzeniach mobilnych. Używam etykiety optgroup, aby wskazać sekcję, do której należy - a następnie samą opcję, aby wskazać podsekcję.

Problem polega na tym, że prawie każda przeglądarka, z którą się spotykam, nie pokazuje grupy optycznej, gdy nie jest ona aktywna. Obejrzałem to, pisząc następujące 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); 
}); 

Wygląda na to, że działa we wszystkim, ale w systemie iOS. W systemie iOS interfejs użytkownika do zmiany zaznaczenia nie odzwierciedla nowego tekstu, który zostanie użyty przy fokusie. Widzę faktyczny wybór powyżej zmiany interfejsu użytkownika Apple - ale ich interfejs użytkownika wcale się nie zmienia.

Ktoś ma pomysł, jak to zrobić?

tutaj pracuje, gdy rozmyty:

I nie działa, gdy koncentruje się (ich UI nadal ma "Branding> Web", kiedy powinien on po prostu powiedzieć "Web"):

---

To musi być błąd - jeśli przewiniesz w dół, a następnie powrócisz na listę - tekst to zmienione - dziwaczne.

Answer 1

Spróbuj użyć wtyczki QuickChange pisał tutaj:

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

Po wklejeniu kodu wtyczki do pliku JavaScript, powinieneś być w stanie zastąpić kod onfocus z tym:

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

Twój istniejący kod onblur powinien nadal działać, aby zmienić wartość.