省份二级联动

$(function(){

    //适配本地和测试环境
    var  host = "http://api.bch.xuemao.com",
        xmhost = 'http://dev.www.xuemao.com';


    var winurl = (window.location.href).split('/')[2];

    if(winurl.indexof('dev')>=0){
        host = "http://api.bch.xuemao.com";
        xmhost = 'http://dev.www.xuemao.com';

    }else if(winurl.indexof('bch') >= 0){

        host = "http://api.bch.xuemao.com";
        xmhost = 'http://www.bch.xuemao.com';

    }else{
        host = "http://api.xuemao.com";
        xmhost = '//www.xuemao.com';
    }

    var citymassage = '';
    //手机号
    function checkphone(){
        var phonenumber = $.trim($('#t_codelayer').val());
        var phone = document.getelementbyid('t_codelayer').value;
        if (phonenumber == null || phonenumber == "") {
            $('#smsmsglayer .error').show();
            $('#smsmsglayer .error .error_msg').html("请输入手机号！");
            return false;
            //手机号正则
        }else if(!(/^1[3456789]\d{9}$/.test(phone))) {
            $('#smsmsglayer .error').show();
            $('#smsmsglayer .error .error_msg').html("请输入正确的手机号");
            return false;
        }
        return true;
    }
    //手机验证码
    function checksmscode(){
        var smscode  = $.trim($('#smscodelayer').val());
        if (smscode == null || smscode == "") {
            $('#smsmsglayer .error').show();
            $('#smsmsglayer .error .error_msg').html("请输入验证码");
            $('#smsmsglayer .error .error_msg').css({
                'color':'#fff'
            })
            return false;
        }
        return true;
    }

    var daoshus = 60;
    var timer = null;
    //获取验证码倒计时1分钟
    function fn_daoshu(){
        $("#smsmsglayer .daoshus").show();
        daoshus -- ;
        $("#smsmsglayer .daoshus").text(daoshus +'s');
        if(daoshus == 0){
            clear_inter();
        }
    }
    //清楚定时器
    function clear_inter(){
        daoshus = 60;
        $("#smsmsglayer .daoshus").text('60s').hide();
        clearinterval(timer);
    }

    //发送短信验证码
    $("#hq_smslayer").click(function(){
        var mobile = $.trim($('#t_codelayer').val());
        if(!checkphone()){
            return false;
        }
        send_login_code(mobile);
    });


    //发送短信验证码
    function send_login_code(mobile)
    {

        $("#smsmsglayer .daoshus").show();
        timer = setinterval(fn_daoshu,1000);
        $("#smscodelayer").attr("disabled" , false);
        $.ajax({
            type:"get",
            url:xmhost+'/api/user/get_sms_code',
            data:{
                mobile: mobile,
            },
            datatype: "json",
            success:function(res){
                if(res.status == 'true'){
                    // com.prompt("发送成功！");
                    $('#smsmsglayer .succ').fadein(500);
                    $('#smsmsglayer .succ').html("发送成功！");
                    $('#smsmsglayer .succ').fadeout(3000);
                }else{
                    $('#smsmsglayer .error').fadein(500);
                    $('#smsmsglayer .error .error_msg').html(res.info);
                    $('#smsmsglayer .error').fadeout(3000);
                    clear_inter();
                    return false;
                }
            },
            error: function(res){
                $('#smsmsglayer .error').show();
                $('#smsmsglayer .error .error_msg').html("请重新获取");

                clear_inter();
                return false;
                // console.log(res)
            }
        });
    }

    //用户名非必填,填了就检验格式
    $("#nusernamelayer").blur(function(){
        var nusername  = $('#nusernamelayer').val();
        if(nusernamelayer == '') return false;
        //只能输入中文 英文 和空格
        var reg =/^[a-za-z\u4e00-\u9fa5\s ]{1,20}$/;
        if(!(reg.test(nusername))) {
            $('#namemsglayer .error .error_msg').html("姓名格式不正确");
            $('#namemsglayer .error').show();
            return false;
        }else {
            $('#namemsglayer .error .error_msg').html("");
            $('#namemsglayer .error').hide();
            return true;
        }

    });
    //用户名验证码
    function t_usrname(){
        var nusername  = $('#nusernamelayer').val();
        //只能输入中文 英文 和空格
        var reg =/^[a-za-z\u4e00-\u9fa5\s ]{1,20}$/;
        if(nusername == null || nusername == "") {
            return true;
        }else if(nusername!=''){
            if(!(reg.test(nusername))) {
                $('#namemsglayer .error .error_msg').html("姓名格式不正确");
                $('#namemsglayer .error').show();
                return false;
            }
            return true;
        }
    }
    $('#nusernamelayer').on("input",function(){
        var nusername = $('#nusername').val();
        if (nusername == null || nusername == "") {
            $('#namemsglayer .error').hide();
            $('#namemsglayer .error .error_msg').html("");
            return true;
        }
    })


    //手机号失焦校验
    $('#t_codelayer').blur(function(){
        if(!checkphone()){
            return false;
        }
    })
    //正在输入检验
    $('#t_codelayer').on("input",function(){
        var phonenumber = $.trim($('#t_codelayer').val());
        var phone = document.getelementbyid('t_code').value;
        if (phonenumber == null || phonenumber == "") {
            $("#hq_smslayer").css({"background":"#eee","color":"#999"});
            return false;
            //手机号正则
        }else if(!(/^1[3456789]\d{9}$/.test(phone))) {
            $("#hq_smslayer").css({"background":"#eee","color":"#999"});
            return false;
        }
        $("#hq_smslayer").css({"background":"#b41f5e","color":"#fff"});
        $("#hq_smslayer.colr").css({"background":"#13c5c1","color":"#fff"});
        $("#hq_smslayer .dbing").css({"background":"#b41f5e","color":"#fff"});
        $("#smsmsglayer .error").hide();
        $("#smsmsglayer .error .error_msg").html('');
    })


    //省份
    var citysdata = [];
    $('.city-picker-spanlayer').click(function(){
        $('#provinceslayer').hide();
        $('#cityslayer').hide();
        // var cityval =$('#city-picker-span .placeholder').html();
        $.ajax({
            type:"get",
            url: host+'/xuemao/public/china_city_class.json',
            data:{
                city:'北-上'
            },
            datatype: 'json',
            success: function(res){
                if(res.result == 'succ'){
                    citysdata = res.data;
                    var data=res.data;
                    var html ='';
                    for(var i=0;i<data.length;i++){
                        var province= data[i].province;
                        html+='<a data-id="'+data[i].id+'" >'+province+'</a>';
                    }
                    $('#provinceslayer .a_padd').html(html)
                    $('#provinceslayer').show();
                }

            },
            error: function(res){

            }
        })

    })

    //选择市
    var proval = '';
    var  cityval = '';
    $("#provinceslayer").on("click" , ".a_padd a" ,function(){
        $('#citylayer').hide();

        proval=$(this).html();
        var this_id = $(this).attr('data-id');
        $('.city-picker-spanlayer .placeholder').html(proval);
        citymassage = proval;
        if(this_id == '2'|| this_id == '19' ||this_id == '857' ||this_id == '2459'){
            var html = $(this).html();

            $('#cityslayer .a_padd').html('<a >'+html+'</a>');
            $('#provinceslayer').hide();
            $('#cityslayer').show();
        }else {
            //二级
            for(var i=0;i<citysdata.length;i++){
                if(this_id == citysdata[i].id){
                    var html = '';
                    for(var j=0;j<citysdata[i].son.length;j++){

                        html += '<a data-id="'+citysdata[i].son[j].id+'">'+citysdata[i].son[j].city+'</a>'
                    }
                    // console.log(html);
                    $('#provinceslayer').hide();
                    $('#cityslayer .a_padd').html(html);
                    $('#cityslayer').show();

                }
            }
        }
    });

    //填充表单数据
    $("#cityslayer").on("click" , ".a_padd a" ,function(){
        cityval= $(this).html();
        $('.city-picker-spanlayer .placeholder').html(proval+'-'+cityval)
        citymassage = proval+'-'+cityval;
        $('#provinceslayer').hide();
        $('#cityslayer').hide();
    })

    //提交前手机号验证码验证
    function mobile_submit(userinfo ){
        $.ajax({
            type:"get",
            url: xmhost+'/api/user/check_sms_code',
            data:{
                mobile : userinfo.mobile,
                code : userinfo.code
            },
            datatype: 'json',
            success: function(res){
                if(res.status == 'true'){
                    postmsg(userinfo);
                }else{
                    $('#smsmsglayer .error .error_msg').html(res.info);
                    $('#smsmsglayer .error').css({
                        'color':'#fff',
                        "position":"absolute",
                        "bottom":'-23px',
                        "left":0,
                        'display':'block'
                    });
                    return false;
                }
            },
            error: function(res){
                return false;
            }
        })

    }

    //提交按钮
    function postmsg(userinfo){
        var reg_source = $.trim($("#source").val()), //暂时写死
            name=$('#nusernamelayer').val();
        var submitinfo = {
            name:name,
            city:citymassage,
            mobile : userinfo.mobile,
            code : userinfo.code ,
            reg_source : reg_source,
            pf_source:1 ,  //pf_source:2(1是pc，2是触屏)
            ip: returncitysn["cip"]

        };
        $.ajax({
            type:"get",
            url: host+'/xuemao/formcollection/save_form_data.json',
            data:submitinfo,
            xhrfields: {
                withcredentials: true
            },
            datatype: 'json',
            success: function(res){
                if(res.result == 'succ'){
                    clear_inter();
                    $('#submsglayer').fadein(500);
                    $('#submsglayer').html("已提交！");
                    $('#submsglayer').fadeout(1000);
                    $('#smsmsglayer .error').hide();
                    $('#t_codelayer').val('');
                    $("#smscodelayer").attr('disabled','disabled').val('');
                    $("#hq_smslayer").css({"background":"#eee","color":"#999"});
                    $('.city-picker-spanlayer .placeholder').html('选择省份/自治区');
                    $('#nusernamelayer').val('');
                }else {
                    // show_msg(res.info);
                    $('#submsglayer').fadein(500);
                    $('#submsglayer').html(res.info);
                    $('#submsglayer').fadeout(1000);
                }
            },
            error: function(res){
                return false;
            }
        })
    }

    $('#s_btnlayer').click(function(){
        var phone = $.trim($('#t_codelayer').val()),
            yz_code = $.trim($('#smscodelayer').val());

        var userinfo = {
            mobile : phone,     //手机号
            code : yz_code     //验证码
        };
        if(!checkphone()){
            return false;
        }
        if(!checksmscode()){
            return false;
        }
        if(!t_usrname()){
            return false;
        }
        mobile_submit(userinfo);

    })

    //非本区域隐藏
    $('body').click(function(e) {
        var target = $(e.target);
        if(!target.is('#provinceslayer *') && !target.is('#cityslayer *')) {
            $('#cityslayer').hide();
            $('#provinceslayer').hide();
        }
    });

})

如对本文有疑问， 点击进行留言回复！！