您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

ajax实现城市三级联动

51自学网 2022-02-21 10:50:46
  ajax

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持51zixue.net。


下载地址:
AJAX实现指定部分页面刷新效果
使用AJAX实现上传文件
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1