2012-12-12 18 views
5

我在移動設備上使用select with optgroups進行某些導航。我使用optgroup的標籤來指明它屬於的部分 - 然後選擇本身來指定子部分。iOS Bug?當使用jQuery專注時,無法更改選擇中的文本

問題是,在幾乎每個我遇到的瀏覽器都不會顯示optgroup時,選擇不重點。我通過編寫下面的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); 
}); 

這似乎適用於iOS以外的所有應用程序。在iOS中,更改選擇的UI不反映焦點上使用的新文本。我可以看到上面蘋果UI的實際選擇變化 - 但他們的UI根本沒有改變。

任何人都有如何做到這一點的想法?

這裏模糊,當它工作:

http://files.secondstreetmedia.com/support/todd/blurred.PNG

而且不聚焦時,工作(他們的UI仍然有 「品牌>網絡」 時,它應該只是說 「網站」):

http://files.secondstreetmedia.com/support/todd/focused-2.jpg


這絕對必須是一個錯誤 - 如果你向下滾動然後備份在列表中 - 文本是變了 - 奇怪。

+0

如果你確定這是一個錯誤,你爲什麼不在蘋果公司註冊一個bug? – dreamlax

+0

我希望這裏有人有一個解決方法或可以建議一個不同的解決方案的問題。 –

+0

另外我確實在那裏發佈了一個bug。 –

回答

0

嘗試使用快速轉換插件張貼在這裏:

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

粘貼插件代碼到你的JavaScript文件後,你應該能夠用它來取代你的聚焦狀態代碼:

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

並且您現有的onblur代碼應該繼續爲更改值返回工作。

相關問題