ajax实现城市三级联动

2024-10-02 20:53:26

本文实例为大家分享了ajax实现城市三级联动的具体代码，供大家参考，具体内容如下

在准备好服务器后

html部分

<div>
        <select name="" id="province">
            <option value="">请选择省份</option>
        </select>
        <select name="" id="city">
            <option value="">请选择城市</option>
        </select>
        <select name="" id="district">
            <option value="">请选择区域</option>
        </select>
</div>

样式部分

<style>
        div {
            text-align: center;
        }

        select {
            width: 150px;
            height: 30px;
        }
</style>

js部分

<script>
        var a = 0;
        var b = 0;
        var d=null;

            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　
                    d = JSON.parse(data.slice(10,-1)); //获取json数据并转化为数组数据
                    $.each(d,function(index,ele){
                    $('<option value = ""></option>').appendTo('#province').text(ele.name);//把省的数据插入列表中
                    })
        　　　　}
            })
        $('#province').on('change',function(e){  //当省变化时
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　
                    d=JSON.parse(data.slice(10,-1));
                    a = e.target.selectedIndex - 1;  //当前下拉列表下标
                    if(a == -1){
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children){
                            $.each(d[a].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#city').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })
        })
        $('#city').on('change',function(e){   //当市变化时
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　
                    d=JSON.parse(data.slice(10,-1));
                    b = e.target.selectedIndex - 1;
                    if(b == -1){
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children[b].children){
                            $.each(d[a].children[b].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#district').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })

        })
</script>

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <style>
        div {
            text-align: center;
        }

        select {
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <select name="" id="province">
            <option value="">请选择省份</option>
        </select>
        <select name="" id="city">
            <option value="">请选择城市</option>
        </select>
        <select name="" id="district">
            <option value="">请选择区域</option>
        </select>
    </div>
    <script>
        var a = 0;
        var b = 0;
        var d=null;

            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　
                    d = JSON.parse(data.slice(10,-1));
                    $.each(d,function(index,ele){
                    $('<option value = ""></option>').appendTo('#province').text(ele.name);
                    })
        　　　　}
            })
        $('#province').on('change',function(e){
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　
                    d=JSON.parse(data.slice(10,-1));
                    a = e.target.selectedIndex - 1;
                    if(a == -1){
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#city').html('<option value="">请选择城市</option>');
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children){
                            $.each(d[a].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#city').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })
        })
        $('#city').on('change',function(e){
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:6562/0929/area-json.js',
                success: function(data){　　　
                    d=JSON.parse(data.slice(10,-1));
                    b = e.target.selectedIndex - 1;
                    if(b == -1){
                        $('#district').html('<option value="">请选择区域</option>');
                    }else{
                        $('#district').html('<option value="">请选择区域</option>');
                        if(d[a].children[b].children){
                            $.each(d[a].children[b].children,function(index,ele){
                                $('<option value = ""></option>').appendTo('#district').text(ele.name);

                            })
                        }
                    }
        　　　　}
            })

        })
    </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

ajax实现无刷新省市县三级联动

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex
AJAX和WebService实现省市县三级联动具体代码

-------------------------------------WebService1.asmx--------------------------------------- 复制代码代码如下: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebServ
jquery+ajax实现省市区三级联动效果简单示例

本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三
AJAX省市区三级联动下拉菜单(java版)

此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
ajax实现三级联动的基本方法

本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下 1.首先在一个页面上布置一个div 方便日后引用方法 <body> <div id="sanji">//div的id为"sanji" </div> 2.sanji js处理页面 $(document).ready(function(){ //向div里面放三个下拉菜单 var str = "<select id='sheng'>&l
jquery+ajax实现省市区三级联动（封装和不封装两种方式）

首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询市级(如:北京市辖):根据市级的areacode查询区级(如东城区) 第一种方式:没有用到封装,数据读取较慢,可以看看原理,这样在第二种方式封装时就容易多了. 代码如下: <!DOCTYPE html> <
PHP+Mysql+Ajax+JS实现省市区三级联动

基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
jQuery ajax实现省市县三级联动

下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑第一步:先做一个省市区表格第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号首先我们要建立数据库: 这就是包含省,市,县的数据库. 下面我们就写主页面:sanji.php:
ajax三级联动的实现方法

ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式比如说北京吧,北京的代号是11,它下面的北京市副代号就11, 北京市的主代号是1101,北京市下面的地区副代号就是1101,调地区的时候可以根据主代号查询和它相同的副代号,就能查询出来想要让三级联动的内容在页面显示,只需要在页面建一个div就可以了 <div id="sanji">
ajax三级联动下拉菜单效果

ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端显示页面非常简单,只需要一

ajax实现城市三级联动

相关推荐

随机推荐