jquery级联下拉框

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: $(document).ready(function(){    //找到三个下拉框    var carnameSelect = $(".carname").children("select");    var cartypeSelect = $(".cartype").children("select");    var wheeltypeSelect = $(".wheelty


$(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);
    });
})



<!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>



wKioL1aSfQWh0W-aAARWvAsbLUM090.png

本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1733587

目录
相关文章
|
29天前
|
JSON JavaScript 前端开发
|
5月前
|
JSON 前端开发 JavaScript
jQuery ajax读取本地json文件 三级联动下拉框
jQuery ajax读取本地json文件 三级联动下拉框
|
11月前
|
JavaScript
jquery实现下拉框选中对应的div
jquery实现下拉框选中对应的div
53 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
351 0
|
JavaScript
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
241 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
|
JavaScript
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
297 0
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
|
JavaScript 前端开发
自制jquery可编辑的下拉框
昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件;在网上查了很多,没有找到合适自己的,所以决定自动制作一个。 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮。
自制jquery可编辑的下拉框
|
JavaScript
jQuery自定义美化下拉框
在线演示 本地下载
867 0
|
JavaScript
jQuery多级联动美化版Select下拉框
在线演示 本地下载
1257 0