zoukankan      html  css  js  c++  java
  • jQuery ajax省市区四级联动

    $(function(){
        query();
        //获取到市
        $('#province').change(function(){
            var id = $('#province').val();
            $.ajax({
                url:'/user/selectp?rootid='+id,
                type:'GET',
                dataType:'json',
                success:function(data){
                    var content = '<option>市</option>';
                    for (var i in data) {    
                        content += '<option value='+data[i].AreaID+'>'+data[i].AreaName+'</option>';
                    }
                    $('#city').html(content);
                    $('#county').html('<option>县/区</option>');
                    $('#street').html('<option>街道</option>');
                }
                
            })
        })
        
        //获取到县/区
        $('#city').change(function(){
            var id = $('#city').val();
            $.ajax({
                url:'/user/selectp?rootid='+id,
                type:'GET',
                dataType:'json',
                success:function(data){
                    var content = '<option>县/区</option>';
                    for (var i in data) {    
                        content += '<option value='+data[i].AreaID+'>'+data[i].AreaName+'</option>';
                    }
                    $('#county').html(content);
                    $('#street').html('<option>街道</option>');
                }
                
            })
        })
        //获取到街道
        $('#county').change(function(){
            var id = $('#county').val();
            $.ajax({
                url:'/user/selectp?rootid='+id,
                type:'GET',
                dataType:'json',
                success:function(data){
                    var content = '<option>街道</option>';
                    for (var i in data) {    
                        content += '<option value='+data[i].AreaID+'>'+data[i].AreaName+'</option>';
                    }
                    $('#street').html(content);
                }
                
            })
        })
        
    })
    
    
    //获取到省份
    function query(){
        var id = 0;
        $.ajax({
            url:'/user/selectp?rootid='+id,    
            type:'GET',
            dataType:'json',
            success:function(data){
                var content = '<option>省</option>';
                for (var i in data) {    
                    content += '<option value='+data[i].AreaID+'>'+data[i].AreaName+'</option>';
                }
                $('#province').html(content);
            }
        })
    }
  • 相关阅读:
    二分查找小结
    FZU みねちゃんの修罗场(从一堆出现三次的数中找出出现两次的数)
    《C陷阱与缺陷》杂记
    HDU 1846 Brave Game(巴什博弈)
    【转载】并查集详解
    第七次作业——学末总结
    STL之vector
    fzuoop期中练习
    MFC 文件对话框
    第六次作业——利用MFC实现计算器图形界面以及简单四则运算表达式批处理
  • 原文地址:https://www.cnblogs.com/sisl/p/4828731.html
Copyright © 2011-2022 走看看