jquery级联

客官°小女子只卖身不卖艺 2022-06-09 02:55 325阅读 0赞

js：

$(document).ready(function()\{

//找到三个下拉框  
    var carnameSelect = $(".carname").children("select");  
    var cartypeSelect = $(".cartype").children("select");  
    var wheeltypeSelect = $(".wheeltype").children("select");  
    var carimg = $(".carimg");  
    //给三个下拉框注册事件  
    carnameSelect.change(function()\{  
        //1.需要获得当前下拉框的值  
        var carnameValue = $(this).val();  
        //1.1只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来  
        wheeltypeSelect.parent().hide();  
        //1.2将汽车图片隐藏起来  
        carimg.hide().attr("src","");            //为了显示图片时候不先显示一下上次图片，所以清除src的值  
        //2.如果值不为空，则将下拉框的值传送给服务器  
        if (carnameValue != "") \{  
            if (!carnameSelect.data(carnameValue)) \{        //判断该键对应的值在缓存中是否有数据  
                $.post("ChainSelect",\{keyword: carnameValue, type: "top"\},function(data)\{  
                    //2.1接收服务器返回的汽车类型  
                    if (data.length != 0) \{  
                        //2.2解析汽车类型的数据，填充到汽车类型的下拉框中  
                        cartypeSelect.html("");  
                        $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);  
                        for (var i = 0; i < data.length; i++) \{  
                            $("<option value='" + data\[i\] + "'>" + data\[i\] + "</option>").appendTo(cartypeSelect);  
                        \}  
                        //2.2.1汽车类型的下拉框显示出  
                        cartypeSelect.parent().show();  
                        //2.2.2第一个下拉框后面的指示图片显示出来  
                        carnameSelect.next().show();  
                    \} else \{  
                        //2.3没有任何汽车类型的数据  
                        cartypeSelect.parent().hide();  
                        carnameSelect.next().hide();  
                    \}  
                    carnameSelect.data(carnameValue, data);        //data函数用来缓存已经访问过的数据  
                \}, "json");        //第四个参数json表示返回的json对象会被js服务器自动转化为js对象  
            \} else \{  
                var data = carnameSelect.data(carnameValue);  
                //2.1接收服务器返回的汽车类型  
                if (data.length != 0) \{  
                    //2.2解析汽车类型的数据，填充到汽车类型的下拉框中  
                    cartypeSelect.html("");  
                    $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);  
                    for (var i = 0; i < data.length; i++) \{  
                        $("<option value='" + data\[i\] + "'>" + data\[i\] + "</option>").appendTo(cartypeSelect);  
                    \}  
                    //2.2.1汽车类型的下拉框显示出  
                    cartypeSelect.parent().show();  
                    //2.2.2第一个下拉框后面的指示图片显示出来  
                    carnameSelect.next().show();  
                \} else \{  
                    //2.3没有任何汽车类型的数据  
                    cartypeSelect.parent().hide();  
                    carnameSelect.next().hide();  
                \}  
            \}  
        \} else \{  
            //3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏  
            cartypeSelect.parent().hide();  
            carnameSelect.next().hide();  
        \}  
    \});  
  
    cartypeSelect.change(function()\{  
        //1.需要获得当前下拉框的值  
        var cartypeValue = $(this).val();  
        //1.1将汽车图片隐藏起来  
        carimg.hide().attr("src","");  
        //2.如果值不为空，则将下拉框的值传送给服务器  
        if (cartypeValue != "") \{  
            if (!cartypeSelect.data(cartypeValue)) \{  
                $.post("ChainSelect",\{keyword: cartypeValue, type: "sub"\},function(data)\{  
                    //2.1接收服务器返回的汽车类型  
                    if (data.length != 0) \{  
                        //2.2解析汽车类型的数据，填充到车轮类型的下拉框中  
                        wheeltypeSelect.html("");  
                        $("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);  
                        for (var i = 0; i < data.length; i++) \{  
                            $("<option value='" + data\[i\] + "'>" + data\[i\] + "</option>").appendTo(wheeltypeSelect);  
                        \}  
                        //2.2.1车轮类型的下拉框显示出  
                        wheeltypeSelect.parent().show();  
                        //2.2.2第二个下拉框后面的指示图片显示出来  
                        cartypeSelect.next().show();  
                    \} else \{  
                        //2.3没有任何汽车类型的数据          
                        wheeltypeSelect.parent().hide();  
                        cartypeSelect.next().hide();  
                    \}  
                    cartypeSelect.data(cartypeValue, data);  
                \}, "json");  
            \} else \{  
                var data = cartypeSelect.data(cartypeValue);  
                //2.1接收服务器返回的汽车类型  
                if (data.length != 0) \{  
                    //2.2解析汽车类型的数据，填充到车轮类型的下拉框中  
                    wheeltypeSelect.html("");  
                    $("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);  
                    for (var i = 0; i < data.length; i++) \{  
                        $("<option value='" + data\[i\] + "'>" + data\[i\] + "</option>").appendTo(wheeltypeSelect);  
                    \}  
                    //2.2.1车轮类型的下拉框显示出  
                    wheeltypeSelect.parent().show();  
                    //2.2.2第二个下拉框后面的指示图片显示出来  
                    cartypeSelect.next().show();  
                \} else \{  
                    //2.3没有任何汽车类型的数据          
                    wheeltypeSelect.parent().hide();  
                    cartypeSelect.next().hide();  
                \}  
            \}  
        \} else \{  
            //3.如果值为空，那么第三个下拉框所在span要隐藏起来，第二个下拉框后面的指示图片也要隐藏  
            wheeltypeSelect.parent().hide();  
            cartypeSelect.next().hide();  
        \}  
    \});  
  
    wheeltypeSelect.change(function()\{  
        //1.获取车轮类型  
        var wheeltypeValue = $(this).val();  
        //2.根据汽车厂商名称，汽车型号和车轮类型得到汽车图片的文件名  
        var carnameValue = carnameSelect.val();  
        var cartypeValue = cartypeSelect.val();  
        var carimgname = carnameValue + "\_" + cartypeValue + "\_" + wheeltypeValue + ".jpg";  
  
        //3.显示出loading的图片  
        carimg.hide();  
        $(".carloading").show();  
        //4.通过Javascript中的Image对象预装载图片  
        var cacheimg = new Image();  
        $(cacheimg).attr("src","images/" + carimgname).load(function()\{        //图片加载完成后才会执行的load里面的方法  
            //隐藏loading图片  
            $(".carloading").hide();  
            //显示汽车图片  
            carimg.attr("src","images/" + carimgname).show();  
        \});  
        //3.修改汽车图片节点的src的值，让汽车图片显示出来  
        //carimg.attr("src","images/" + carimgname).show();  
        //4.使汽车图片的节点显示出来  
    \});  
  
  
    //给数据装载中的节点定义ajax事件，实现动画提示效果  
    $(".loading").ajaxStart(function()\{  
        $(this).css("visibility","visible");  
        $(this).animate(\{        //用于创建动画效果的函数  
            opacity: 1                //非透明度  
        \},0);                                //多少毫秒后执行动画  
    \}).ajaxStop(function()\{  
        $(this).animate(\{  
            opacity: 0  
        \},500);  
    \});  
\})

客户端：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <title>JQuery实例-级联下拉框效果</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <link type="text/css" rel="stylesheet" href="css/chainselect.css" />  
        <script type="text/javascript" src="js/jquery.js"></script>  
        <script type="text/javascript" src="js/chainselect.js"></script>  
    </head>  
    <body>  
        <div class="loading">  
            <p><img src="images/data-loading.gif" alt="数据装载中" /></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 src="images/pfeil.gif" alt="有数据" />  
            </span>  
            <span class="cartype">  
                汽车类型:  
                <select></select>  
                <img src="images/pfeil.gif" alt="有数据" />  
            </span>  
            <span class="wheeltype">  
                车轮类型：  
                <select></select>  
            </span>  
        </div>  
        <div class="carimage">  
            <p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>  
            <p><img src="" alt="汽车图片" class="carimg"/></p>  
        </div>  
    </body>  
</html>