<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. C#遍历窗体所有控件或某类型所有控件

    //遍历窗体所有控件, foreach (Control control in this.Controls) { //遍历后的操作... control.Enabled = false; } 遍历某个 ...

  2. Java中Scanner的用法

    转载自: http://blog.csdn.net/pkbilly/article/details/3068912 Scanner是SDK1.5新增的一个类,可是使用该类创建一个对象.Scanner ...

  3. 戴文的Linux内核专题：04安全

    转自Linux中国 Linux内核是所有Linux系统的核心.如果有任何恶意代码控制或破害了内核的任何一部分,那么系统会严重受损,文件可能被删除或损坏,私人信息可能被盗等等.很明显,保持内核安全涉及到 ...

  4. io函数

    io函数一般分为两大类: 系统(不带缓存)调用: 如read.write.open 标准(带缓存)调用: fread.fwrite.fopen 上面说的带缓存/不带缓存是针对用户态的,内核态本身都是带 ...

  5. LIS-Program E

    最大上升子序列 Description The world financial crisis is quite a subject. Some people are more relaxed whil ...

  6. Cannot change network to bridged: There are no un-bridged host network adapters解决方法

    首先,在你安装上了虚拟机后要确保你也安装了桥接的协议,这可以通过点击右键“网上邻居”,在其中可以看到有两个虚拟出来的网络一个VMnet1,另一个是VMnet8, 如下图所示. 如果没有安装,可以通过下 ...

  7. arguments.callee

    arguments.callee在哪个函数中运行,他就代表哪个函数,一般在匿名函数中.在匿名函数中有时需要自己调用自己,但是由于是匿名函数,没有名字,所以可以用arguments.callee来代替匿 ...

  8. 第八章 标准IO库

    1.IO对象时不可复制或者赋值的:也就是说形参或者返回类型也不能为流类型.如果非要传递或者返回IO对象的的话,则必须传递或者返回指向对象的指针或者引用.如:  ofstream &print( ...

  9. SharePoint 2013 运行在IIS 应用32位错误

    问题描述: 今天有一个项目因为用了OWC11,没有64位的dll,因此IIS设置了“启用32位应用程序”为true. 如图: 详细操作见:http://www.cnblogs.com/cainiaog ...

  10. SyntaxError: missing ; before statement 错误的解决

    今天jsp页面中报错:SyntaxError: missing ; before statement 简单的理解是语法错误,F12调试之后发现原来是我定义的一个js中的全局变量的问题. <scr ...