JQuery学习5——级联下拉框效果

           JQuery的学习可以告一段落了，在最后的一次学习中，又让我感触到了我前面说的。

           在做AJAX的时候，用JQuery1.7.1版本和JQuery1.9.1版本好像里面的function无法执行一样，不得已还是用的以前的版本，多实践感悟就会更深。

            在最后一次学习中又学习到了新的内容:

            1、可以用JQuery中的data来缓存数据。

            2、可以用javascript中的Image对象来做预装载图片

            下面是我在本次系列学习过程中实现的源码，如果有感兴趣的朋友可以下载

             http://download.youkuaiyun.com/detail/yjjm1990/5174469

             下面是JS代码，方便以后自己进行查阅：

/// <reference path="jquery.js" />

$(document).ready(function () {
    var carName = $(".carName").children("select");
    var carType = $(".carType").children("select");
    var whellType = $(".whellType").children("select");

    //首先为三个下拉选择框，值改变时注册事件
    carName.change(function () {
        var carNameVlaue = carName.val();
        if (carNameVlaue != "") {
            //如果选择的car的名字的value不为空的话

            //如果缓存里有数据
            if (carName.data(carNameVlaue) != undefined) {
                //这是测试用的
                //alert(carName.data(carNameVlaue));
                var returnData = carName.data(carNameVlaue);
                //把之前的数据清空
                carType.html("");
                //添加一个请“请选择汽车类型”
                $(" <option value=''>请选择汽车类型</option>").appendTo(carType);
                //如果返回的数据不为空的话
                for (var i = 0; i < returnData.length; i++) {
                    $('<option value="' + returnData[i] + '">' + returnData[i] + "</option>").appendTo(carType);
                }
                carType.parent().show();
                $("#carImg").hide();
            }
            else {
                $.post("ChainSelect.ashx", { keyword: carNameVlaue, type: "top" }, function (data) {
                    if (data.length != 0) {
                        //把之前的数据清空
                        carType.html("");
                        //添加一个请“请选择汽车类型”
                        $(" <option value=''>请选择汽车类型</option>").appendTo(carType);
                        //如果返回的数据不为空的话
                        for (var i = 0; i < data.length; i++) {
                            $('<option value="' + data[i] + '">' + data[i] + "</option>").appendTo(carType);
                        }
                        carType.parent().show();
                        $("#carImg").hide();

                        //将数据进行缓存
                        carName.data(carNameVlaue, data);
                    }
                    else {
                        //如果没有返回数据的话
                        carType.parent().hide();
                        carName.next("img").hide();
                        $("#carImg").hide();
                    }
                }, "json");
            }
        }
        else {
            whellType.parent().hide();
            carType.parent().hide();
            carName.next("img").hide();
            $("#carImg").hide();
        }
    });

    carType.change(function () {
        var carTypeVlaue = carType.val();
        if (carTypeVlaue != "") {
            //如果选择的car的名字的value不为空的话
            $.post("ChainSelect.ashx", { keyword: carTypeVlaue, type: "sub" }, function (returnData) {
                if (returnData.length != 0) {
                    //把之前的数据清空
                    whellType.html("");
                    //添加一个请“请选择汽车类型”
                    $("<option value=''>请选择车轮类型</option>").appendTo(whellType);
                    //如果返回的数据不为空的话
                    for (var i = 0; i < returnData.length; i++) {
                        $('<option value="' + returnData[i] + '">' + returnData[i] + "</option>").appendTo(whellType);
                    }
                    whellType.parent().show();
                    carType.next("img").show();
                    $("#carImg").hide();
                                  

                }
                else {
                    //如果没有返回数据的话
                    whellType.parent().hide();
                    carType.next("img").hide();
                    $("#carImg").hide();
                }
            }, "json");
        }
        else {
            whellType.parent().hide();
            carType.next("img").hide();
            $("#carImg").hide();
        }
    });

    whellType.change(function () {
        var imgData = carName.val() + "_" + carType.val() + "_" + whellType.val();
        $("#carImg").show();
        $("#carImage").hide();
        $("#imgLoading").show();
        //通过javascript中的Image对象预装载图像
        var cacheimg = new Image();
        $(cacheimg).attr({ "src": "images/" + imgData + ".jpg", alt: imgData }).load(function () {
            //隐藏loading
            //当然如果这里还可以加上我们前面说过的效果。
            $("#imgLoading").hide();
            $("#carImage").attr({ src: "images/" + imgData + ".jpg", alt: imgData }).show();;
        });

    });


    //给数据装载中的结点定义ajax事件，实现动画提示效果
    $("#loading").ajaxStart(function () {
        $(this).css("visibility", "visible");
        $(this).animate({
            opacity: 1
        }, 0);
    }).ajaxStop(function () {
        $(this).animate({
            opacity: 0
        }, 500);
    });
});