<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. 测试bug级别定义

    致命bug:不能完全满足系统要求,系统停止运行,系统的重要部件无法运行,系统崩溃或者挂起等导致系统不能正常运行. 修改优先级为最高,该级别问题需要立即修改. 1.系统崩溃 2.导致程序重启,死机或非法 ...

  2. Swift 实现下拉刷新 JxbRefresh

    JxbRefresh 是采用Swift 实现的 iOS 下拉刷新. 正常下拉刷新: 1 2 3 4 5 self.taleView.addPullRefresh({ [weak self] in    ...

  3. 知道创宇CTO杨冀龙：网络安全人才决定行业格局

    去年的时候,我曾经在团队内部分享了一个“网络安全人才迁徙图”,被圈子里的同行广为传播.几乎所有行业的安全人士都表示:国内网络安全行业人才资源情况并不乐观——有着10年以上网络安全行业经验的核心安全人才 ...

  4. 一些需要注意的C知识点

    1.数组在作为参数传递到函数时,会退化为一个指针.也就是说,一旦进入函数内部,数组已经变为了一个指针.其实是在参数传递的时候进行了浅拷贝,编译器会声明一个指针指向该数组,在函数内部所有的操作都是对该临 ...

  5. Python 第三方模块安装出现的问题和解决方案.

    出现此类问题 A) ImportError: cannot import name '_win32stdio'B) ImportError: No module named 'win32api' 需要 ...

  6. python的变量作用域

    import time global mark,sum def gaosi(Q): global sum,mark # 在 使用的时候防止隔离 也要声明一下 这个是全局变量 , 引用外面的值 sum+ ...

  7. 对于我的linux常用命令的说明

    我所列出的linux常用命令中的选项并不是全部的选项,是一些我们经常用到的linux命令及选项

  8. 【LeetCode】Best Time to Buy and Sell Stock IV

    Best Time to Buy and Sell Stock IV Say you have an array for which the ith element is the price of a ...

  9. Android AIDL使用详解

    1.什么是aidl:aidl是 Android Interface definition language的缩写,一看就明白,它是一种android内部进程通信接口的描述语言,通过它我们可以定义进程间 ...

  10. Socket编程回顾，一个最简单服务器程序

    第一次接触服务器是快毕业的时候,是不是有点晚(#￣ω￣),这也导致工作方向一直没考虑网络编程这块,做了好多其他没啥“意思”的技术. 之前看到一篇博文提到程序猿80%都是庸才,10%是人才,10%是天才 ...