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);
            }
        })
    }
  • 相关阅读:
    杭电1009 FatMouse' Trade
    【HDU 3183】 字符串处理
    quick_sort
    【 HDU 3172 Virtual Friends】 并查集+map指针优化
    【HDU 3127】 完全背包
    【URAL 1260】 DP (dfs打表之后找规律也行)
    【 HDU 3038 How Many Answers Are Wrong】 并查集好题
    腾讯云的图片上传与下载
    获取ip(局域网内的IP是一样的)
    vue表单提交之后,清空input里的数据
  • 原文地址:https://www.cnblogs.com/sisl/p/4828731.html
Copyright © 2011-2022 走看看