1

この magento の jQuery コードは、基本的に 3 ステップの自動車部品検索です。最初のユーザーは製造年、製造会社、モデル番号を選択して自動車部品リストを取得します。このコードは IE と Firefox では動作しますが、Chrome では動作しません。エラーを見つけることができません。解決策をお待ちしております

$j = jQuery.noConflict();
$j(document).ready(function(){
    for(st1 = 1; st1 <= 1000; st1++) {
        //filling options of select.opt1
        //works fine
    }

    $j("#shop-by-vehicle select.opt1 option").click(function() {
        $j("#shop-by-vehicle select.opt2 option").remove();
        $j("#shop-by-vehicle select.opt3 option").remove();
        for(st2 = 1; st2 <= 1000; st2++) {
            //used to fill options of select.opt2
        }

        $j("#shop-by-vehicle select.opt2 option").click(function() {
            $j("#shop-by-vehicle select.opt3 option").remove();
            for(st3 = 1; st3 <= 10000; st3++) {
                //used to fill options of select.opt3
            }

            $j("#shop-by-vehicle select.opt3 option").click(function() {
                // do something when select.opt3 options are clicked
            });
        });
    });
}); //end jquery function

HTMLコード

<div id="shop-by-vehicle">
    <div class="steps">
        <select class="opt1 opt"></select>
    </div>
    <div class="steps">
        <select class="opt2 opt"></select>
    </div>
    <div class="steps">
        <select class="opt3 opt"></select>
    </div>
</div>
4

2 に答える 2

1

動的要素にはon()をそのまま使用しremoving、adding options

使用する

 $("#shop-by-vehicle select.opt2").on('click','option',function(){

代わりに

("#shop-by-vehicle select.opt2 option").click(function(){

お気に入り、

;(function($){
    // you can use $ in place of $j now
    $(document).ready(function(){
        for(st1=1;st1<=1000;st1++)
        {
            //filling options of select.opt1
            //works fine
        }
        $("#shop-by-vehicle select.opt1 option").click(function()
        {

            $("#shop-by-vehicle select.opt2 option").remove();
            $("#shop-by-vehicle select.opt3 option").remove();
            for(st2=1;st2<=1000;st2++)
            {
                //used to fill options of select.opt2
            }

            // use on() for dynamic elements
            $("#shop-by-vehicle select.opt2").on('click','option',function(){
                $("#shop-by-vehicle select.opt3 option").remove();
                for(st3=1;st3<=10000;st3++)
                {
                     //used to fill options of select.opt3
                }
                // use on() for dynamic elements
                $("#shop-by-vehicle select.opt3").on('click','option',function()
                {
                    // do something when select.opt3 options are clicked
                });
            });
        });
    });//end jquery function
})(window.jQuery);// pass jQuery here
于 2013-10-23T12:56:19.197 に答える
1

ネストされたclickハンドラーが問題の正しい解決策になることはほとんどありません。また、完全なアクセシビリティのために要素でchangeイベントを使用します。selectこれを試して：

$j(document).ready(function(){
    for(st1 = 1; st1 <= 1000; st1++) {
        //filling options of select.opt1
        //works fine
    }

    $j("#shop-by-vehicle select.opt1").change(function() {
        $j("#shop-by-vehicle select.opt2").empty();
        $j("#shop-by-vehicle select.opt3").empty();
        for(st2 = 1; st2 <= 1000; st2++) {
            //used to fill options of select.opt2
        }
    });


    $j("#shop-by-vehicle select.opt2").change(function() {
        $j("#shop-by-vehicle select.opt3").empty();
        for(st3 = 1; st3 <= 10000; st3++) {
            //used to fill options of select.opt3
        }
    });


    $j("#shop-by-vehicle select.opt3").change(function() {
        // do something when select.opt3 options are clicked
    });
});
于 2013-10-23T12:57:57.267 に答える