1

このページhttp://jsfiddle.net/atoswchataigner/euX5FをIE7/IE8で実行すると、次のようになります。

このスクリプトの実行を停止しますか？このページのスクリプトが原因で、InternetExplorerの実行が遅くなっています。引き続き実行すると、コンピューターが応答しなくなる可能性があります。

基本的に、このすべてのスクリプトを実行して、selectのオプションをグループ化します。

そのような変換を行い、IEでこのアラートを取り除くためのより良い方法を見つけましたか？

4

3 に答える 3

3

大量のセレクター操作を実行していますが、それぞれが特に古いブラウザーではあまり効率的ではありません。

1 つのセレクター操作を実行し、その 1 つの操作ですべてのオプション値を処理する方がはるかに優れています。これを行うには、適切なクラス名を与えるオプション値のルックアップ テーブルを作成します。これが例です。入力が多いため、表全体には記入しませんでしたが (残りは入力できます)、次のように機能します。

これはあなたが持っていたものよりも何倍も速いはずです（おそらく100倍以上速いでしょう）：

    // class names used for various options
    var optionClasses = [
        "ART - LETTRES - SPECTACLE",
        "ECONOMIE",
        "ETRANGER"
    ];
    // the number in the option map corresponds to an array index 
    // in the optionClasses array.  This is done to avoid repeating
    // the same string over and over
    var optionMap = {
        'ART - LETTRES - SPECTACLE': 0,
        'A la une ALS': 0,
        'Cirque' : 0,
        'Festival multidisciplinaire': 0,
        'Littérature-édition': 0,
        'Musique classique': 0,
        'Photographie': 0,
        'Cinéma': 0,
        /* .... */
        'ECONOMIE': 1,
        'A la une Economie': 1,
        /* ... */
        'ETRANGER': 2,
        'A la une Etranger': 2
        /* fill in the rest of the data here */
    };

    jQuery("select option").each(function() {
        if (this.value && this.value in optionMap) {
            var clsNum = optionMap[this.value];
            $(this).addClass(optionClasses[clsNum]);
        }
    });

シンプルで、以前より何倍も速く実行できるはずです。これには 1 つのセレクター操作があり、ハッシュ テーブル ルックアップを使用して、指定されたオプション値の適切なクラス名を見つけます。

于 2012-04-30T07:12:21.940 に答える
1

この種のセレクターは、Firefox でも非常に遅いようです。

"[option value='...']" の部分により、jQuery はドキュメント全体のすべての要素をスキャンして、一致する要素を探していると思います。これは、各セレクター内の用語(',' で囲まれた部分) ごとに行われます。それは大変な作業です。

私はフィドルを持っていて、次のような方法を使用すると、Firefox で応答性が大幅に向上することがわかりました。

var options = $("option");
var $XXX = options.filter("[value=VALUE1], [value=VALUE2], [value=VALUE3]");
// etc

これが行うことは、最初に選択オプションのみを含むjqueryオブジェクト/コレクションを作成し、そこからセレクターを使用して必要なものを除外することです。

このメソッドを使用するようにコードを変更してみてください。

于 2012-04-30T07:04:28.287 に答える
1

私が理解していることから、あなたのコードは、最初の選択に基づいて2番目の選択でオプションをロードすることです。

このような膨大な量の要素を DOM に置くのは大変です。異常に長い DOM 要素の行を読み込む代わりに、データを配列やオブジェクトとして保存し、必要に応じて読み込みます。このようにして、選択は最初は空白になります。

//storing second options as objects and arrays
var second = {
    art : [
        {text:'artOption1Text',value:'artOption1Value'},
        {text:'artOption2Text',value:'artOption2Value'},
        {text:'artOption3Text',value:'artOption3Value'}
        ...
    ],
    social : [
        {text:'socialOption1Text',value:'socialOption1Value'},
        {text:'socialOption2Text',value:'socialOption2Value'},
        {text:'socialOption3Text',value:'socialOption3Value'}
        ...
    ]
    ...
}

var secondSelect = $('secondselect');          //reference your second select

$('firstselect').on('change',function(){       //on change of first select
    var newOptions = second[this.value];       //get the new values

    secondSelect.children().remove();          //remove current options

    $.each(newOptions,function(index,option){ //add the new options

        $('<option>')
            .attr('value',option.value)
            .text(option.text)
            .appendTo(secondSelect);
    });
}
于 2012-04-30T07:06:22.850 に答える