1

Magento 中的这个 jQuery 代码基本上是一个三步汽车零件查找器，首先用户选择制造年份，然后选择制造公司，然后是型号以获取汽车零件列表。该代码仅适用于 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

代码

<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 回答