3

すべての HTML ドロップダウンをブートストラップ ドロップダウンに変換する JS コードがあります。

jQuery(function($){
    $('#primary').each(function(i, e) {
        if (!($(e).data('convert') == 'no')) {
            $(e).hide().wrap('<div style="display:inline-block;" class="btn-group" id="select-group-' + i + '" />');
            var select = $('#select-group-' + i);
            var current = ($(e).val()) ? $(e).val(): 'Category';

            select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a data-toggle="dropdown" style="border-radius:4px 0px 0px 4px; margin-right:0px;" class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul style="max-height:300px; overflow-y:scroll; overflow: -moz-scrollbars-vertical;" class="dropdown-menu"></ul>');

            $(e).find('option').each(function(o,q) {
                if($(q).attr('value') > 0) {
                    if($(q).attr('value') == 30 || $(q).attr('value') == 17 || $(q).attr('value') == 185 ||  $(q).attr('value') == 196 || $(q).attr('value') == 197 ) {
                        select.find('.dropdown-menu').append('<li style="background-color:#FFFACD;"><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
                    } else {
                        select.find('.dropdown-menu').append('<li><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
                    }
                }
                if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
            });

            select.find('.dropdown-menu a').click(function() {
                select.find('input[type=hidden]').val($(this).data('value')).change();
                select.find('.btn:eq(0)').text($(this).text());
            });
        }
    });
});

IEコンソールを確認しましたが、エラーはまったく表示されていません...

Safari/Chrome などの Webkit ブラウザでは問題なく表示されますが、IE では表示されません。IE (IE 10) では、ドロップダウンは次のように空です: (Empty in html)

ここに画像の説明を入力

サファリでは、次のようになります。

ここに画像の説明を入力

更新:

さらにデバッグした後、問題はここにあります...$(e).find('option').each(function(o,q) {内部のすべてのコードが動作していないため、IEで行が動作していないようです。 問題はそれ.find()です。.children('option')またはに変更しましたが.children()、すべてIEで動作しません。jQuery 1.7.2 を使用しています。

$(e).find('option').each(function(o,q) {
...
}
4

1 に答える 1

0

ドロップダウンul要素を調べて、lis があるかどうかを確認します。これは、IE で非常に一般的な CSS の問題のようです。

ul ant の要素にfloat: left;を与えてみてください。とwidth。

于 2013-07-31T13:43:55.267 に答える