jQuery--动态级联菜单

拼搏现实的明天。 2021-09-27 05:00 479阅读 0赞

*  前言
 *  内容
    
     *  显示效果：
        
         *  HTML代码：
         *  CSS代码：
         *  JavaScript代码：
 *  总结
    
     *   *  HTML知识点：
         *  CSS知识点：
         *  JavaScript知识点：
 *  end

# 前言 #

上一篇博客更新了在页面中如何像菜单栏显示效果的程序，这篇博客介绍一下我们经常可以在各大汽车网站或存在选择的网站中看到的动态级联菜单。

# 内容 #

## 显示效果： ##

![这里写图片描述][70]  
![这里写图片描述][70 1]  
照例，先上代码，

### HTML代码： ###

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="script/jquery-1.8.2.js"></script>
        <script src="script/chainselect.js"></script>
        <link href="CSS/chainselect.css" rel="stylesheet" />
    </head>
    <body>
        <div class="loading">
            <p>
                <img src="img/chainselect/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="VW">大众</option>
                <option value="Audi">奥迪</option>
            </select>
                <img src="img/chainselect/pfeil.gif" alt="有数据" />
            </span>
            <span class="cartype">汽车型号：
            <select></select>
                <img src="img/chainselect/pfeil.gif" alt="有数据" />
            </span>
            <span class="wheeltype">车轮型号：
            <select></select>
    
            </span>
        </div>
        <div class="carimage">
            <p>
                <img src="img/chainselect/img-loading.gif" alt="图片装载中..." class="carloading" />
            </p>
            <p>
                <img src="" alt="汽车图片" class="carimg" />
            </p>
        </div>
    </body>
    </html>

### CSS代码： ###

.loading { width: 400px; /*margin-left:auto; margin-right:auto;*/ margin: 0 auto; visibility: hidden; }
    
        .loading p { text-align: center; }
    
    p { margin: 0; }
    
    .car { width: 500px; margin: 0 auto; text-align: center; }
    
    .carimage { text-align: center; }
    
    .cartype, .carimg, .carloading, .car img, .wheeltype { display: none; }

### JavaScript代码： ###

$(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", "");
            //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);
                    }, "json");
                } 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 () { 
                //隐藏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);
        });
    })

这次JavaScript代码稍微有点长，但是对于一目十行的大神们来说这都不算啥！

# 总结 #

### HTML知识点： ###

1.  img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来
2.  select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在jQuery中用val方法获取并发送给服务器的。定义selected的属性值为selected时，表示当前option被选中
3.  p标签表示一个段落的内容，其中的内容会独占一行或多行，后面的内容会另一起行显示

### CSS知识点： ###

1.  div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto。简写方法是margin：0 auto；
2.  为了让p标签中文字和图片居中，可以使用text-align属性，属性值为center。p标签默认有margin-top和margin-bottom的值，需要的话可以通过css清除
3.  visibility的属性值为hidden时，元素隐藏，但是和display为none不同的时，在页面中任然占据一定空间，只是不显示
4.  多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用都好分割

### JavaScript知识点： ###

1.  change方法对应标准JavaScript中的onchange时间，可以处理下拉框内容变化的时间
2.  parent方法可以获得一个节点的父结点
3.  next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点
4.  $.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是JavaScript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，jQuery会根据这个参数帮我们进行转换，get方法只有第二个参数不同，其他几个参数用法相同
5.  JavaScript中的简单对象定义方法是｛key1：value1，key2：value2｝
6.  Json的数据格式其实就是JavaScript中的一个对象或数据定义的文本格式内容，比如｛key1：value1，key2：\[1，2，3\]｝或\[1，2，｛key2：value2｝\]
7.  可以直接$(““)的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中
8.  attr方法可以设置或获取某一个节点的属性值
9.  ajaxStart在每一个jQuery发出的ajax请求开始前执行，ajaxStop在jQuery队列中所有的ajax请求结束后执行，ajaxComplete在每一个jQuery发出的ajax请求结束后执行  
    10.fadeOut和fadeIn可以实现淡入淡出的效果，参数内容和slideUp，slideDown方法类似
10. animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果
11. opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示完全透明。jQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果
12. data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷
13. 可以使用JavaScript中的image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息
14. load方法可以对应JavaScript中的onload时间，本例中用于捕捉图片加载完成的事件

# end #

谢谢您的阅读！

[70]: /images/20210923/aa61533951fe42aca1035ec79ba0cb6c.png
[70 1]: /images/20210923/a8a146ed05d74bbfa19fe750b0dff3f1.png