`
DoubleEO
  • 浏览: 158226 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jq实现级联下拉框效果

CSSAjaxjsonHTML 
阅读更多 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery5-级联下拉框</title>
    <link type="text/css" rel="stylesheet" href="css/chainselect.css">
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/chainselect.js"></script>
</head>
<body>
<div class="loading">
    <div>
        <p><img src="image/loading.gif" alt="数据装载中"/></p>

        <p>数据装载中..................</p>
    </div>
</div>
<div class="car">
    <span class="carname">
        汽车厂商：
        <select>
            <option value="" selected="selected">请选择厂商</option>
            <option value="BMW">宝马</option>
            <option value="Audi">奥迪</option>
            <option value="UW">大众</option>
        </select>
        <img src="image/closed.gif" alt="有数据"/>
    </span>
     <span class="cartype">
        汽车类型：
        <select></select>
        <img src="image/closed.gif" alt="有数据"/>
    </span>
    <span class="wheeltype">
        车轮类型：
        <select></select>
    </span>
</div>
<div class="carimage">
    <p><img src="image/loadingyuan.gif" alt="图片装载中" class="carloading"></p>

    <p><img src="" alt="汽车图片" class="carimg"></p>
</div>
</body>
</html>



.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, .wheeltype, .carimg, .carloading, .car img {
    display: none;
}



$(function() {
    //找到3个下拉框
    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只要第一个下拉框的内容有变化，第3个下拉框就要藏起来
        wheeltypeSelect.parent().hide();
        //1.2将汽车图片隐藏起来
        carimg.hide().attr("src", "");
        //2.如果值不为空，则将下拉框的值传送给服务器
        if (carnameValue != "") {
            if (cartypeSelect.data(carnameValue)) {
                $.post("/selecttest/test", {keyword:carnameValue,type:"top"}, function() {
                    //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显示image next找兄弟节点
                        carnameSelect.next().show();
                    } else {
                        //2.3m没有任何汽车类型的数据
                        cartypeSelect.parent().hide();
                        carnameSelect.next().hide();
                    }
                    //缓存
                    carnameSelect.data(carnameValue, data);
                }, "json");
            } else {
                var data = cartypeSelect.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显示image next找兄弟节点
                    carnameSelect.next().show();
                } else {
                    //2.3m没有任何汽车类型的数据
                    cartypeSelect.parent().hide();
                    carnameSelect.next().hide();
                }
            }
        } else {
            //3.如果值为空，那么第2个下拉框所在的span要隐藏，第一个下拉框后面的指示图片
            //也要隐藏
            cartypeSelect.parent().hide();
            carnameSelect.next().hide();
        }

    });
    cartypeSelect.change(function() {
        //1.需要获得当前下拉框的值
        var carntypeValue = $(this).val();
        //1,1将汽车图片隐藏起来
        carimg.hide().attr("src", "");
        //2.如果值不为空，则将下拉框的值传送给服务器
        if (carntypeValue != "") {
            $.post("/selecttest/test", {keyword:carnameValue,type:"sub"}, function() {
                //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(cartypeSelect);
                    }
                    //2.2.1车轮类型的下拉框显示出来
                    wheeltypeSelect.parent().show();
                    //2.2.2显示image next找兄弟节点
                    carntypeValue.next().show();
                } else {
                    //2.3m没有任何汽车类型的数据
                    wheeltypeSelect.parent().hide();
                    carntypeValue.next().hide();
                }
            }, "html");
        } else {
            //3.如果值为空，那么第3个下拉框所在的span要隐藏，第一个下拉框后面的指示图片
            //也要隐藏
            wheeltypeSelect.parent().hide();
            carntypeValue.next().hide();
        }
    });
    wheeltypeSelect.change(function() {
        //1获取车轮类型
        var wheeltypeValue = $(this).val();
        var carnameValue = carnameSelect.val();
        var cartypeValue = cartypeSelect.val();

        //2根据汽车厂商名称
        var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";
        //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);
    });

});


分享到：
| jq实现标签页效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    无限极级联下拉框的封装

    在本案例中，我们将讨论如何使用jQuery库来实现无限极联的级联下拉框，并探讨其实现原理和关键代码。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件...

    jQuery带搜索功能的下拉框，可以动态添加数据，实现级联效果

    jQuery带搜索功能的下拉框，可以动态添加数据，实现级联效果。效果图参看博客：https://blog.csdn.net/BigBoySunshine/article/details/88293931

    jQuery世界城市三级联动下拉选择代码

    在这个项目中，jQuery被用来监听用户的选择，同步更新下拉列表，实现联动效果。 `chosen.jquery.min.js`和`chosen.min.css`是Chosen插件的文件，Chosen是一个优秀的下拉选择框增强插件，它可以将传统的HTML select...

    jQuery下拉框多级菜单筛选插件.zip

    本资源“jQuery下拉框多级菜单筛选插件”是为了解决在网页表单中实现复杂下拉菜单筛选功能的一个实用工具。这个插件通过创建层次化的菜单结构，使用户能够更高效地在大量选项中进行筛选，提高交互体验。 在传统的...

    cascaderjs级联选择器

    级联选择器，通常被称为级联下拉框或树形下拉菜单，是一种常见的用户界面元素，尤其在数据层次结构复杂的情况下，它允许用户逐级浏览和选择数据。在JavaScript开发中，这种组件能够为用户提供清晰、直观的导航体验，...

    Jquery实现ajax二级级联查询

    当请求成功时，会调用success回调函数，在这里我们可以解析XML并填充第二个级联下拉框。解析XML可以使用jQuery的`$.parseXML()`方法，然后通过`find()`或`children()`等方法遍历节点，如下所示： ```javascript $....

    jQuery无限层级下拉框

    3. **DOM操作**：使用jQuery的DOM（Document Object Model）操作方法，如`next()`, `prev()`, 和 `children()`，来添加、删除和修改下拉框，确保同一页面上多个级联下拉框之间的独立性。 4. **事件处理**：`...

    基于jquery的无限级联下拉框js插件

    开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷（之所以这么多代码是因为该级联下拉框有时只出现2个或3个），想到这类的需求其实经常都能遇到，jquery里没有这样比较好的...

    jQuery下拉框二级三级城市联动插件

    在网页开发中，实现下拉框的联动效果可以极大地提升用户体验，尤其是在处理地理位置信息时，如选择国家、省份和城市。"jQuery下拉框二级三级城市联动插件"就是这样一个工具，它允许用户通过级联的下拉菜单，便捷地...

    jQuery下拉框三级联动插件.zip

    1. 支持一级、二级、三级数据：插件可以根据需求配置任意数量的级联下拉框，适应不同复杂程度的业务场景。 2. 自定义初始值：用户可以设定各级下拉框的默认选中项，提供良好的初次访问体验。 3. 动态加载：在用户...

    jquery.myselect.js

    对于需要多个关联选择的情况，jQuery.myselect.js支持级联下拉框的实现。当用户在一个下拉框中选择一个选项时，另一个下拉框会根据所选内容动态更新其可选项，提供了更灵活的数据筛选和导航功能。 3. **高度可定制...

    angularjs实现的省市区地址级联选择器

    3. 使用指令创建级联选择器：利用AngularJS的自定义指令，我们可以创建级联下拉框。每个下拉框的`ng-change`事件触发相应的函数，更新下一级别的选项。 ```html (selectedProvince)"&gt; 请选择省份 (selectedCity)...

    jquery实例演示及动态效果

    例如，我们可以看到如何使用jQuery实现级联下拉框，即当用户在一个下拉框中选择一项时，根据选择自动填充另一个下拉框。 "级联"这个标签也表明了在这些实例中可能包含了联动效果，比如在多级菜单、筛选条件或地区...

    jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    效果图： 图标 (function($){ //初始化清除按钮 function initClear(target){ var jq = $(target); var opts = jq.data('combo').options; var combo = jq.data('combo').combo; var arrow = combo.find...

    EasyUI学习之Combobox级联下拉列表(2)

    在本文中，我们将深入探讨EasyUI的Combobox级联下拉列表的实现，这是一个非常实用的功能，常用于数据筛选和信息检索。EasyUI是基于jQuery的前端框架，它提供了丰富的UI组件，使得开发者能够快速构建美观且响应式的...

    Jquery实现省市区三级联动多选.zip

    在本案例中，jQuery将用于处理DOM操作、事件绑定以及动画效果。 二、三级联动原理 1. 一级联动：当用户选择一个省份时，自动更新市的下拉框，显示该省的所有城市。 2. 二级联动：用户选择一个城市后，市的下拉框会...

    JQuery+Js实现的全国最新省市区级联效果

    在网页开发中，级联选择（Cascading Dropdown）是一种常见的...通过查看这些文件，你可以更深入地学习和理解这个级联效果的实现细节。如果需要进一步的帮助，如代码解析或优化建议，可以提供具体的代码内容进行讨论。

    DIV+CSS+jQ实现省市联动可扩展

    本文将探讨如何利用HTML的`&lt;div&gt;`标签、CSS样式以及jQuery库来实现一个可扩展的省市联动效果。 首先，我们来看`&lt;div&gt;`标签的使用。`&lt;div&gt;`是HTML中的一个块级元素，用于组织和分组页面内容。在这个案例中，`&lt;div&gt;`...

    jquery基于layui实现二级联动下拉选择(省份城市选择)

    先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) 城市 &lt;select name=city lay-filter=province&gt; &lt;option xss=removed&gt;&lt;/option&gt; 北京市 天津市&lt;/o

    jQuery实现动态生成年月日级联下拉列表示例

    为了确保级联效果，我们在`#dateForm select[name=month]`的选择事件中添加了一个监听器，当月份发生变化时，会触发一个函数来更新日期下拉列表。这个函数首先清空当前的日期选项，然后根据所选的月份计算天数，最后...

Magicbox
Global site tag (gtag.js) - Google Analytics