jquery级联下拉框_web前端_网页制作_码蚁之家_www.codes51.com
返回首页
专题
网络编程
ASP教程 .NET教程 PHP教程 JSP教程 C#教程 Java教程 Delphi教程 VB教程 C/C++教程 Android开发 IOS开发 Windows Phone开发 Python教程 Ruby教程 移动开发 其他编程教程
网页制作
HTML教程 CSS教程 Dreamweaver教程 FrontPages教程 Javascript教程 web前端
数据库
SqlServer MySql Oracle Access DB2 SQLite 其他数据库
图形设计
photoshop教程 Fireworks教程 CorelDraw教程 Illustrator教程 AutoCad教程 FLASH教程
操作系统
Windows xp教程 Windows 7教程 Windows 8教程 Windows 2003教程 Windows Server 2008教程 Linux教程 Windows 10
网站运营
建站经验 SEO优化 站长心得 网赚技巧 网站推广 站长故事
手机学院
手机速递 安卓教程 iphone教程 手机评测 手机技巧 手机知识 手机应用 手机游戏 手机导购
网店宝典
开店指导 开店经验 网店装修 网店推广 网店seo 网购技巧
软件教程
办公软件 系统工具 媒体工具 压缩工具 图文处理 文件管理
范文之家
自我介绍 自我鉴定 写作模板 合同范本 工作总结 贺词祝福语 演讲致辞 思想汇报 入党申请书 实习报告 心得体会 工作计划 简历模板 工作报告 导游词 评语寄语 口号大全 策划书范文
信息工程
软件工程 企业开发 系统运维 软件测试
移民之家
移民动态 移民政策 移民百科 移民生活 技术移民 投资移民
知识大全
母婴 数码 摄影 装修 美文 常识 时尚 婚嫁 美食 养生 旅游 兴趣 职场 教育 文学 健康
问答大全
电脑网络 手机数码 QQ专区 生活 游戏 体育运动 娱乐明星 休闲爱好 文化艺术 社会民生 教育科学 健康医疗 商业理财 情感家庭 地区问题 其他
编程问答
IOS Android .NET Java C/C++ Delphi VC/MFC 其他语言 PHP MSSQL MYSQL Oracle 其他数据库 Web开发 Windows Linux 硬件/嵌入开发 网络通信 移动开发 云计算 企业IT 游戏开发
笑话大全
幽默笑话 爱情笑话 成人笑话 校园笑话 爆笑笑话 综合笑话 古代笑话 现代笑话 国外笑话

jquery级联下拉框

来源:互联网  时间:2016/1/10 22:27:39
$(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" c/></p>
        </div>
    </body>
</html>

jquery级联下拉框


上一篇XTunnel实现内网穿透
下一篇python学习第二天,一些常用集合list、元组、字典功能和用法等
明星图片
相关文章
《jquery级联下拉框》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)