使用jQuery实现联动效果

应用场景：收货地址

1、准备三个下拉框
<select class="changeArea" id='province'>

    <option value="" > --请选择-- </option>

</select>

<select class="changeArea" id="city">

    <option value="" > --请选择-- </option>

</select>

<select class="changeArea" id="area">

    <option value="" > --请选择-- </option>

</select>
2、由于架构是前后端分离、所以使用Ajax发送请求获取省份数据、然后渲染
<script>

    // 页面初始化的是时候、调用此方法

    getList( 0, '#province' )

    // 公共方法 - 获取数据

    function getList( id, position )

    {

        $.ajax({

            method: 'get',

            url: "http://www.test.com/index.php/region/getList",

            data: {

                id:id

            },

            dataType: 'json',

            success: function( res )

            {

                // 判断返回的结果

                if( res.code == 0 )

                {

                    var str = ' <option value=""> --请选择-- </option>'

                    $( res.data).each( function( k,v ){

                        str += ' <option value="'+v.id+'">'+v.name+'</option>'

                    })

                    $( position ).html( str )

                }

            }

        })

    }

</script>
3、由于页面到现在只实现了第一个下拉框省份的数据、要实现省份发生改变的时候、城市也发生改变、为了减少代码的冗余、直接调用js公共方法
$(document).on('change', '.changeArea', function(){

    var id = $(this).val()

    var position = $(this).next().prop('id')

    getList( id, '#'+position )

})
4、实现如上之后、发现数据改变的还存在问题、省份改变之后、之前选择的地区数据依旧还在、为了解决、使用如下代码
$(this).nextAll().html( '<option value=""> --请选择-- </option>' )
5、最终实现、效果如下：

6、最终的代码如下：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title> 联动 </title>

</head>

<body>

    <select class="changeArea" id='province'>

        <option value="" > --请选择-- </option>

    </select>

    <select class="changeArea" id="city">

        <option value="" > --请选择-- </option>

    </select>

    <select class="changeArea" id="area">

        <option value="" > --请选择-- </option>

    </select>

</body>

</html>

<script src="__STATIC__/jquery-3.3.1.js"></script>

<script>

    // 页面初始化的是时候、调用此方法

    getList( 0, '#province' )

    // 下拉框的改变事件

    // 1、获取数据id

    // 2、获取当前下拉框之后的第一个兄弟节点的id

    // 3、将当前下拉框之后的所有兄弟节点的内容变为请选择

    // 4、判读id是否为空、如果为空、则终止执行

    // 5、调用公共方法获取对应数据

    $(document).on('change', '.changeArea', function(){

        var id = $(this).val()

        var position = $(this).next().prop('id')

        $(this).nextAll().html( '<option value=""> --请选择-- </option>' )

        if( id == '' )

        {

            return false;

        }

        getList( id, '#'+position )

    })

    // 公共方法 - 获取数据

    function getList( id, position )

    {

        $.ajax({

            method: 'get',

            url: "http://www.test.com/index.php/region/getList",

            data: {

                id:id

            },

            dataType: 'json',

            success: function( res )

            {

                // 判断返回的结果

                // 如果状态码为0、则表示返回成功、则让之后的节点显示、同时、将数据追加

                // 如果状态码不是0、则表示返回失败、则让之后兄弟节点隐藏

                if( res.code == 0 )

                {

                    $( position ).show()

                    var str = ' <option value=""> --请选择-- </option>'

                    $( res.data).each( function( k,v ){

                        str += ' <option value="'+v.id+'">'+v.name+'</option>'

                    })

                    $( position ).html( str )

                }else{

                    $( position ).hide()

                }

            }

        })

    }

</script>

js 实现 联动的更多相关文章

  1. [js开源组件开发]js手机联动选择地区仿ios 开源git

    js手机联动选择地区 前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在git ...

  2. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  3. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  4. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  5. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  6. 省市区js三级联动（原创）

    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...

  7. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  8. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  9. 前端js 省市联动

    代码下载地址 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  10. JS省市区联动

    JS省市区使用文档 一:服务器返回JSON格式要求如下网址里面data的格式:(拿KISSY组件data格式来做的) http://gallery.kissyui.com/cityselector/d ...

随机推荐

  1. 深度探索c++对象模型 第二章

    1,c++转换函数:显示转换和隐式转换. 隐式转换为程序员提供了很大的变量.比如整形提升,普通类型转换为类类型(operator int())都为程序带来无尽的方便.试想,如果没有整形提升,一个sho ...

  2. Linux CentOS删除或重命名文件夹和文件的办法

    Linux.CentOS操作系统下如何删除和重命名文件夹呢?办法如下: 一.Linux.CentOS下重命名文件和文件夹 mv:move 用移动文件命令就可以了,因为linux系统没有专门的重命名命令 ...

  3. Python爬虫的起点

    第一章主要讲解爬虫相关的知识如:http.网页.爬虫法律等,让大家对爬虫有了一个比较完善的了解和一些题外的知识点. 今天这篇文章将是我们第二章的第一篇,我们从今天开始就正式进入实战阶段,后面将会有更多 ...

  4. MySQL 全文索引实现简单版搜索引擎

    目录 前言 使用 三种类型的全文搜索方式 相关参数 测试innodb引擎使用全文索引 准备 使用默认方式创建全文索引 使用ngram分词解析器创建全文索引 结论 前言 只有Innodb和myisam存 ...

  5. 查询IP地址的免费API

    1.百度 1.http://sp0.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?query=192.168.0.0&co=&resource_ ...

  6. 二、JavaScript的语法

    目录: 1.变量:存储数据的容器 2.数据类型 3.string数据类型 4.number数据类型 5.boolean数据类型 6.数据类型的隐式转换 6.数据类型转换函数 7.特殊类型 8.算术运算 ...

  7. Mysql CPU使用率长期100%的解决思路备忘

    最近一台服务器的CPU使用率长期保持在100%的状态,查看进程发现是Mysql服务导致的.于是搜索各方资料,终于成功解决问题.备忘以及分享一下,希望可以帮助各位新手朋友. (服务器运行环境是Windo ...

  8. 双剑合璧——掌握 cURL 和 Dig 走天涯

    如今随着大量的应用转移到网络,作为开发者,会经常做一些通讯测试,例如从网站获取信息.模拟用户向网站提交或者上传数据,查看应用通讯情况等等,现在变成了非常重要的任务. 一起来认识 cURL cURL 是 ...

  9. HDU - 1232 畅通工程【并查集】

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. backbone之路由锚点的替换

    1.需求 由于项目一开始做的时候不甚完善,所有的网页没有路由功能,导致一些搜索结果在页面跳转之后,没有被记录下来,在页面跳转之后回退,得到的是页面最原始的结果,没有指定的搜索条件.最近项目的在完善这些 ...