zoukankan      html  css  js  c++  java
  • 地址四级联动

    直接代码

    https://github.com/king-y/jQuery/tree/master/extend/address

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="./jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <select id="province">
            <option value="">-请选择-</option>
        </select>
        <select id="city">
            <option value="">-请选择-</option>
        </select>
        <select id="area">
            <option value="">-请选择-</option>
        </select>
        <select id="town">
            <option value="">-请选择-</option>
        </select>
        <script>
    
                //省/直辖市
                $('#province').click(function(){
                    $.ajax({
                        type : 'get',
                        url : './1.php',
                        data : 'level=1',
                        dataType:'json',
                        success : function(data) {
                            for (var i = 0; i < data.length; i++) {
                                $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#province'));
                            }
                        },
                        error : function() {
                            alert('AJAX执行失败');
                        }
                    });
                });
    
    
    
                //市/区
                $('#province').change(function(){
                    //获取id
                    var i= $('#province').val();
                    $.ajax({
                            type : 'get',
                            url : './2.php',
                            data : {'upid':i},
                            dataType:'json',
                            success : function(data) {
                                    $('#city option').remove('option');
                                    for (var i = 0; i <data.length; i++) {
                                         $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#city'));
                                    }
                            },
                            error : function() {
                                alert('AJAX执行失败');
                            }
                    });
                    $('#area').css('display','none');
                    $('#town').css('display','none');
                });
    
                //区/县
                $('#city').change(function() {
                    var n = $('#city').val();
                    $.ajax({
                            type : 'get',
                            url : './3.php',
                            data : {'upid':n},
                            dataType:'json',
                            success : function(data) {
                                if (data!='') {
                                    $('#area').show();
                                    $('#town').hide();
                                    $('#area option').remove('option');
                                    for (var i = 0; i <data.length; i++) {
                                         $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#area'));
                                    }
                                }else{
                                    $('#area').css('display','none');
                                    $('#town').css('display','none');
                                }
                            },
                            error : function() {
                                alert('AJAX执行失败');
                            }
                    });
                });
    
                //城镇/街道
                 $('#area').change(function() {
                    var m = $('#area').val();
                    $.ajax({
                            type : 'get',
                            url : './4.php',
                            data : {'upid':m},
                            dataType:'json',
                            success : function(data) {
                                if (data!='') {
                                    $('#town').css('display','');
                                    $('#town option').remove('option');
                                    for (var i = 0; i <data.length; i++) {
                                         $('<option value='+data[i]['id']+'>'+data[i]['name']+'</option>').appendTo($('#town'));
                                    }
                                }else{
                                      $('#town').css('display','none');
                                }
                            },
                            error : function() {
                                alert('AJAX执行失败');
                            }
                    });
                });
    
        </script>
    </body>
    </html>
  • 相关阅读:
    Maximum sum-动态规划
    Ubuntu14下Hadoop开发&lt;1&gt; 基础环境安装
    POJ 3252 Round Numbers 数学题解
    ubuntu环境 rake aborted!
    oracle decode函数用法
    Android多线程研究(1)——线程基础及源码剖析
    2014冬去春来
    Android中的动画详解系列【4】——Activity之间切换动画
    JavaScript你所不知道的困惑(3)
    研发人员技术定级的一些思考
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/9639376.html
Copyright © 2011-2022 走看看