5

モバイル デバイスでのナビゲーションに、optgroups を使用して select を使用しています。optgroup のラベルを使用してそれが属するセクションを示し、次にオプション自体を使用してサブセクションを指定します。

問題は、私が遭遇するほとんどすべてのブラウザーで、選択がフォーカスされていないときに 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 は、フォーカスで使用される新しいテキストを反映しません。Apple の UI の上にある実際の選択が変更されていることがわかりますが、UI はまったく変更されていません。

これを行う方法を知っている人はいますか？

ここでは、ぼやけているときに機能しています。

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

フォーカスされているときに機能しない (UI には、「Web」と表示されているはずなのに、まだ「Branding > Web」と表示されている):

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

これは絶対にバグであるに違いありません.下にスクロールしてからリストに戻ると、テキストが変更されます.奇妙な.

4

2 に答える 2

0

ここに投稿された quickChange プラグインを使用してみてください:

モバイル Safari ドロップダウン リスト項目の選択ボックスで「次へ」を使用すると、select/dropdown の onchange() JS イベントの奇妙な動作が発生する

プラグイン コードを Javascript ファイルに貼り付けた後、onfocus コードを次のように置き換えることができます。

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

また、既存の onblur コードは、値を元に戻すために引き続き機能するはずです。

于 2013-01-08T19:58:32.000 に答える