<body onLoad="sheng()">
<div class="xqbody">
    <form action="#" method="post" class="editform">
        <p class="qychoose">工作区域选择：</p>
        <div class="namebox">
            <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
            <select name="sheng" id='sheng'>
                <option>请选择省份</option>
            </select>
            <select name="shi" id='shi'><option>请选择城市</option></select>
            <select name="qu" id='qu'><option>请选择区域</option></select>
        </div>
    </form>
</div>
<div class="clear"></div>
<script>
    function sheng(){
        $.getJSON('/php/city.php','tid=0',function(data){
            var count = data.length;
            var html = '';
            if(count==0){return;}
            for(var i=0;i<count;i++){
                html = html+'<option value="'+data[i].name+'" tid="'+data[i].cid+'">'+data[i].name+'</option>';
            }
            $('#sheng').append(html);
        });
    }
    $('#sheng option').live('click',function(){
        var tid = $(this).attr('tid');
        $.getJSON('/php/city.php','tid='+tid,function(data){
            var count = data.length;
            var html = '';
            if(count==0){return;}
            for(var i=0;i<count;i++){
                html = html+'<option value="'+data[i].name+'" tid="'+data[i].cid+'">'+data[i].name+'</option>';
            }
            $('#shi').append(html);
        });
    });
    $('#shi option').live('click',function(){
        var tid = $(this).attr('tid');
        $.getJSON('/php/city.php','tid='+tid,function(data){
            var count = data.length;
            var html = '';
            if(count==0){return;}
            for(var i=0;i<count;i++){
                html = html+'<option value="'+data[i].name+'" tid="'+data[i].cid+'">'+data[i].name+'</option>';
            }
            $('#qu').append(html);
        });
    });
</script>

ajax 城市区域选择三级联动的更多相关文章

  1. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  2. 多级联动系列——ajax调用XML实现三级联动

    ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...

  3. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  4. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  5. 【2017-06-06】Ajax完整结构、三级联动的制作

    一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...

  6. ajax加php实现三级联动

    js代码 <script type="text/javascript">    function get_next(t,pid){  //当前元素的id,当前optio ...

  7. 省份、城市、区县三级联动Html代码

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  8. Ajax省市地区下拉列表三级联动

    SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]( [Id] [int] NULL, [Name] [varchar](50) NULL, [or ...

  9. ajax练习习题二三级联动

    异步执行 1数据传输收发数据的时候不用等待对方接受,可以继续发送 2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高 同步执行 1收发数据的时候要等到对方接受的成功,才可以继续发 ...

随机推荐

  1. hdu 4617 Weapon

    http://acm.hdu.edu.cn/showproblem.php?pid=4617 三维几何简单题 多谢高尚博学长留下的模板 代码: #include <iostream> #i ...

  2. 关于jquery html()方法获取带有OBJECT标签的元素内容时，出现“类型不匹配。”的解决办法

    关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()

  3. C/S端开发问题汇总

    0.先推荐几款工具,连接远程客户端DameWare Mini Remote Control,搜索本地文件Everything,以及sysinternals的系列工具: FileMon-监视所有文件修改 ...

  4. 神奇的NOIP模拟赛 T3 LGTB 玩THD

    LGTB 玩THD LGTB 最近在玩一个类似DOTA 的游戏名叫THD有一天他在守一座塔,对面的N 个小兵排成一列从近到远站在塔前面每个小兵有一定的血量hi,杀死后有一定的金钱gi每一秒,他都可以攻 ...

  5. ssl和https协议详解

    转自:https://cuiyongxiu.com/201102/24157.html ssl协议的起源和历史我就不再多说了,就是那个Netscape 网景公司开发的,它的作用主要是提供了一种安全传输 ...

  6. bzoj 2301 莫比乌斯反演

    对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 这里题目意思很明显 对于要求的f[n] = sig ...

  7. JVM-class文件完全解析-魔数

    魔数(Magic Number) 魔数和Class文件的版本. 一个文件能否被Java虚拟机接受,不是通过文件的扩展名来进行识别的,而是通过魔数来进行识别．这主要是基于安全方面的考虑,因为文件的扩展名 ...

  8. HTML--4格式布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...

  9. poj1125(Floyd最短路)

    //Accepted 164 KB 0 ms //floyd #include <cstdio> #include <cstring> #include <iostrea ...

  10. ZOJ 3747 - Attack on Titans (递推)

    题意:有三个兵种R,G,C,选取N个排成一列,要求G至少有M个连续的,R至多有K个连续的,问有多少种排列方式. 此题与UVa 10328 - Coin Toss非常相似,都是问某个字符连续出现的种数. ...