<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. TopCoder SRM 583 TurnOnLamps

    读错题了有没有呀,原来 lamps 是在边上的呀,当成是在点上的了,无语. 直接一个dfs 就可以 从叶子节点开始,如果有必要转换 lamp 的状态则加一个仅包含 这个 lamp 的段 然后向上扩展, ...

  2. Ubuntu: an error occurred while mounting /mnt/hgfs

    对于这个error,我采用的一个不完美的方法是: vi /etc/fstab .host:/projectname /mnt/hgfs vmhgfs rw,ttl=,uid=my_uid,gid=my ...

  3. 数据结构-AVL树的旋转

    http://blog.csdn.net/GabrieL1026/article/details/6311339 平衡二叉树在进行插入操作的时候可能出现不平衡的情况,AVL树即是一种自平衡的二叉树,它 ...

  4. iOS开发中XML的DOM和SAX解析方法

    一.介绍 dom是w3c指定的一套规范标准,核心是按树形结构处理数据,dom解析器读入xml文件并在内存中建立一个结构一模一样的“树”,这树各节点和xml各标记对应,通过操纵此“树”来处理xml中的文 ...

  5. Python开发入门与实战1-开发环境

    1.搭建Python Django开发环境 1.1.Python运行环境安装 Python官网:http://www.python.org/ Python最新源码,二进制文档,新闻资讯等可以在Pyth ...

  6. Codeforces Round #247 (Div. 2)

    A.水题. 遍历字符串对所给的对应数字求和即可. B.简单题. 对5个编号全排列,然后计算每种情况的高兴度,取最大值. C.dp. 设dp[n][is]表示对于k-trees边和等于n时,如果is== ...

  7. FZU 2072 - Count

    题意:给一个数组,每次查询输出区间内数字x出现的次数. 每次查询数字x是与其它数字无关的,所以我们可以以每个数字为索引建立一个链表,里面存放它出现的下标,这里可以保证是递增的.每次查询数字x,就在x的 ...

  8. C语言：typedef 跟 define 的区别

    typedef (int*) pINT1;以及下面这行:#define pINT2 int* pINT1 a,b; 与pINT2 a,b; 定义的a,b 有差别吗 回答: typedef作为类型定义关 ...

  9. numpy中的broadcast

    关于broadcast,官方文档描述如下: Each universal function takes array inputs and produces array outputs by perfo ...

  10. Android Launcher 详解

    (1)      Launcher的定义:Android系统启动后,加载的第一个程序,是其他应用程序的入口. (2)      Launcher的构成:HomeScreen(1.workspace(A ...