22

Chrome のレンダリング バグの回避策を探しています。select 要素に非表示のオプション要素が約 90% 以上ある場合に表示されます。Chrome では、ドロップダウンの高さが短すぎて使用できません。これは、他のブラウザでは発生しないようです。jsFiddle で例を表示します。

画像

HTML Example
Note: Some options were removed to keep the code brief.
The bug does not show up unless all options are present.

100 Options, 90% Hidden:<br>
<select>
<option value="">Select an Option</option>
<option value="0" style="display: none">Option 0</option>
<option value="1" style="display: none">Option 1</option>
<option value="2" style="display: none">Option 2</option>
<option value="3" style="display: none">Option 3</option>
<!-- Options removed for brevity. -->
<option value="86" style="display: none">Option 86</option>
<option value="87" style="display: none">Option 87</option>
<option value="88" style="display: none">Option 88</option>
<option value="89" style="display: none">Option 89</option>
<option value="90">Option 90</option>
<option value="91">Option 91</option>
<option value="92">Option 92</option>
<option value="93">Option 93</option>
<option value="94">Option 94</option>
<option value="95">Option 95</option>
<option value="96">Option 96</option>
<option value="97">Option 97</option>
<option value="98">Option 98</option>
<option value="99">Option 99</option>
</select>

テスト済みのブラウザ:

  • クローム 27 & 28 (不合格)
  • Firefox 21 (パス)
  • IE 9 (合格)
  • オペラ 12 (パス)
  • Safari 5.1 (パス)

jsFiddle の
代替例リンクで例を表示

更新:この件についていくつか読んだところ、どうやらオプションは選択内に隠されるべきではないようです。オプションを無効にすることはできますが、それらは消えません。オプションをまったく選択したくない場合は、ノードを完全に削除する必要があります。オプションを非表示にする機能は、クロスブラウザーでは完全には機能しないようです。ほとんどの場合、矢印キーを使用して「非表示」オプションを選択し続けることができます。オプションのオンとオフを切り替える必要があるため、これは私の特定の状況では不便ですが、これが今のところ機能する唯一の方法のようです.

4

7 に答える 7

3

これを追加すると、回避策と見なされる場合があります。

 $(document).ready(function () {

    $('#ph2').mouseenter(function () {

      var html = '';

        $(this).find('option').each(function () {

            if ($(this).css('display') !== 'none') {

                html = html + '<option>' + $(this).text() + '</option>';   
            }
        });

        $(this).html(html);
    })
});

これがjsFiddleです。簡単にするためにjqueryを使用しています。この場合、mouseenter で HTML をやり直しています。理想的ではありませんが、さらに先に進むことができます。また、ph2 が HTML の div として設定されていることに注意してください。最初から選択要素として設定する必要があると思います。フィドルで、htmlに加えた変更を確認できます。しかし、全体として、バグが修正されるまで、このようなものは、機能するオプションを得るのと同じくらい近いものになると思います.

于 2013-06-20T01:49:31.833 に答える
1

私はこの問題を抱えていましたが、これが私がしたことです：

var originalSelect = $("#the_select").clone();

function hideSomeOptions(){
  $('#the_select .hide_me').remove();
}

function restoreAllOptions(){
  $("#the_select").replaceWith(originalSelect[0]);
}

ターゲット選択入力には ID "the_select" があり、トグルが必要なオプションまたは optgroup には "hide_me" クラスがあります。

于 2015-05-12T17:13:15.750 に答える
1

このバグの回避策として、次の解決策を提案できます。

  • オプションを非表示にするには、それを他のタグに「変換」し、 で非表示にし.hide()ます。
  • オプションを表示するには、それを 'convert' に戻し、optionで表示し.show()ます。

「変換」には、https://stackoverflow.com/a/9468280のようなものが必要です。

例：

// some `replaceTagName` implementation here

// hiding options
$('.option-selector').replaceTagName('span').hide();

// showing options
$('.option-selector').replaceTagName('option').show();

少し重いですが、動作します:)

于 2014-10-07T06:00:28.587 に答える
0

私は同じ問題 (Chrome 40) に遭遇し、次の回避策がうまく機能することがわかりました。

var originalOptions = [];

$(document).ready(function(){
    originalOptions = $("yourSelect").children("option");

    $("someElement").someEvent(function(){
        $("yourSelect").children("option").remove();
        $(originalOptions).each(function(){
            if(/*criteria here*/){$("yourSelect").append($(this));}
        });
    });
});
于 2015-03-13T18:27:18.003 に答える
0

非表示/表示オプションの順序が違いを生むことがわかりました。これは、クロムが最初の非表示オプションでドロップダウンの高さのカウントを停止するようなものです。1 つの方法は、表示されているオプションを選択の一番上に移動することです。jquery を使用している場合は、次のようになります。

var select = "select#MySelect";
$(select).children("option").hide();  //hide all options
$(select).children("Selector for items to show").each(function(idx, elm) {
           $(elm).parent().prepend(elm);  //move item to the top of parent
});
$(select).children("Selector for items to show").show(); //show selected options
于 2014-08-26T16:50:36.413 に答える
-1

最良の修正は、最後の最後に追加することです

<option></option> あなたの選択要素で。次のコードを追加します。

<optgroup></optgroup>

これにより、空白のグループ要素が追加されます。今のところ、このまれなバグに対する簡単で迅速な修正が最適です。

ありがとう！

于 2014-01-28T21:36:16.253 に答える