级联下拉框效果 Jquery 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>级联下拉框效果</title>
    
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //找到三个下拉框
            var carnameSelect = $(".carname").children("select");
            var cartypeSelect = $(".cartype").children("select");
            var wheeltypeSelect = $(".wheeltype").children("select");
            var carimg = $(".carimg");
            //给三个下拉框注册change事件
            carnameSelect.change(function () {
                //1.需要获得当前下拉框的值
                var carnameValue = $(this).val();

                if (carnameValue != "") {
                    if (!carnameSelect.data(carnameValue)) {//加入从缓存里拿到值得话不需要再和服务器交互
                        // alert(carnameValue);
                        $.post("getJson.ashx", { type: 1, carname: carnameValue }, function (json) {
                            //alert(json.value.length);
                            cartypeSelect.html("");
                            $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
                            if (json.value.length != 0) {
                                for (var i = 0; i < json.value.length; i++) {
                                    $("<option value='" + json.value[i].result + "'>" + json.value[i].result + "</option>").appendTo(cartypeSelect);
                                }
                            } else {
                                cartypeSelect.parent().hide();
                                carnameSelect.next().hide();
                            }
                            carnameSelect.data(carnameValue, json); //加入到缓存
                        }, 'json');

                    } else {
                        var json = carnameSelect.data(carnameValue);
                        cartypeSelect.html("");
                        $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
                        if (json.value.length != 0) {
                            for (var i = 0; i < json.value.length; i++) {
                                $("<option value='" + json.value[i].result + "'>" + json.value[i].result + "</option>").appendTo(cartypeSelect);
                            }
                        } else {
                            cartypeSelect.parent().hide();
                            carnameSelect.next().hide();
                        }

                    }
                    carnameSelect.next().show();
                    cartypeSelect.parent().show();
                    wheeltypeSelect.parent().hide();
                    cartypeSelect.next().hide();
                    carimg.hide().attr("src", "");
                } else {
                    cartypeSelect.parent().hide();
                    carnameSelect.next().hide();
                    carimg.hide().attr("src", "");
                }

            });
            cartypeSelect.change(function () {
                var carnameValue = carnameSelect.val();
                var cartypeValue = $(this).val();

                if (cartypeValue != "") {
                    if (!cartypeSelect.data(cartypeValue)) {
                        // alert(carnameValue);
                        $.post("getJson.ashx", { type: 2, carname: carnameValue, cartype: cartypeValue }, function (json) {
                            //alert(json.value.length);
                            wheeltypeSelect.html("");
                            $("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
                            if (json.value.length != 0) {
                                for (var i = 0; i < json.value.length; i++) {
                                    $("<option value='" + json.value[i].result + "'>" + json.value[i].result + "</option>").appendTo(wheeltypeSelect);
                                }
                            } else {
                                wheeltypeSelect.parent().hide();
                                cartypeSelect.next().hide();
                            }
                            cartypeSelect.data(cartypeValue, json); //加入到缓存
                        }, 'json');

                    } else {
                        var json = cartypeSelect.data(cartypeValue);
                        wheeltypeSelect.html("");
                        $("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
                        if (json.value.length != 0) {
                            for (var i = 0; i < json.value.length; i++) {
                                $("<option value='" + json.value[i].result + "'>" + json.value[i].result + "</option>").appendTo(wheeltypeSelect);
                            }
                        } else {
                            wheeltypeSelect.parent().hide();
                            cartypeSelect.next().hide();
                        }
                    }
                    cartypeSelect.next().show();
                    wheeltypeSelect.parent().show();
                    carimg.hide().attr("src", "");
                } else {
                    wheeltypeSelect.parent().hide();
                    cartypeSelect.next().hide();
                    carimg.hide().attr("src", "");
                }
            });
            wheeltypeSelect.change(function () {
                carimg.hide();
                var carnameValue = carnameSelect.val();
                var cartypeValue = cartypeSelect.val();
                var wheeltypeValue = $(this).val();
                var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";
                $(".carloading").show();
                var cacheimg = new Image();
                $(cacheimg).attr("src", "../images/" + carimgname).load(function () {
                    $(".carloading").hide();
                    carimg.attr("src", "../images/" + carimgname).show();
                });


            });

            $(".loading").ajaxStart(function () {
                $(this).css("visibility", "visible");
                $(this).animate({
                    opacity: 1
                }, 0);
            }).ajaxStop(function () {
                // $(this).css("visibility", "hidden");
                // $(this).fadeOut(500);
                $(this).animate({
                    opacity: 0
                }, 500);

            });

        });
    </script>
    <style type="text/css">
    .loading
    {
        width:400px;
        margin-left:auto;
        margin-right:auto; /*margin: 0 auto; 让一个div居中设置宽度加margin*/
        visibility:hidden;/*和display：none的区别是，它是影藏，区域还是存在的*/
    }
    .loading p
    {
        text-align:center;
    }  
    p
    {
        margin:0;
    }
    .car
    {
       /* width:500px;
        margin:0 auto;*/
        text-align:center;
    }
    .carimage
    {
        text-align:center;
    }
    .cartype,.wheeltype,.car img,.carloading,.carimg
    {
        display:none;
    }

    </style>
</head>
<body>
    <div class="loading">
        <p><img alt="数据加载中" src="../images/data-loading.gif" /></p>
        <p>数据加载中...</p>
    </div>
    <div class="car">
        <span class="carname">
            汽车厂商：
            <select>
                <option value="" selected="selected">请选择厂商</option>
                <option value="BMW">宝马</option>
                <option value="Audi">奥迪</option>
                <option value="VW">大众</option>
            </select>
            <img alt="箭头" src="../images/pfeil.gif" />
        </span>
        <span class="cartype">
            汽车类型：
            <select></select>
            <img alt="箭头" src="../images/pfeil.gif" />
        </span>
        <span class="wheeltype">
            车轮类型
            <select></select>
        </span>
    </div>
    <div class="carimage">
        <p><img alt="加载中" src="../images/img-loading.gif" class="carloading"/></p>
        <p><img alt="图片加载中" src="" class="carimg" /></p>
    </div>
</body>
</html>

 

 

posted on 2013-10-05 14:44  鱼东鱼  阅读(390)  评论(0)  编辑  收藏  举报

导航