三级联动ajax同步

html

<div id="frame"></div>

js

$(function(){
    //拼接省市区下拉框
    var str = `<select id=‘sheng‘></select>
            <select id=‘shi‘></select>
            <select id=‘qu‘></select>`;
    $(‘#frame‘).html(str);
    //页面加载完成后执行省市区显示函数。
    sheng();
    shi();
    qu();
    //省市添加改变函数，当这一项改变时下面的项跟着改变
    $(‘#sheng‘).change(function(){
        shi();
        qu();
    })
    $(‘#shi‘).change(function(){
        qu();
    })
})
//省显示函数
function sheng(){
    //设置pid为0
    var pcode = ‘0‘;
    var str = ‘‘;
    //异步进行，pid传入后台，返回的json第0项为id 第1项为地区名
    //循环拼接option，放入html
    $.ajax({
        type:"post",url:"sjll.PHP",async:false,data:{
            pcode:pcode
        },dataType:‘json‘,success:function(data){
            for(var i = 0; i < data.length; i++){
                str += "<option value=‘"+data[i][0]+"‘>"+data[i][1]+"</option>";
            }
            $(‘#sheng‘).html(str);
        }
    });
}
function shi(){
    //获取省的id值为市的pid
    var pcode = $(‘#sheng‘).val();
    var str = ‘‘;
    //异步进行，pid传入后台，返回的json第0项为id 第1项为地区名
    //循环拼接option，放入html
    $.ajax({
        type:"post",success:function(data){
            for(var i = 0; i < data.length; i++){
                str += "<option value=‘"+data[i][0]+"‘>"+data[i][1]+"</option>";
            }
            $(‘#shi‘).html(str);
        }
    });
}
function qu(){
    //获取市的id值为区的pid
    var pcode = $(‘#shi‘).val();
    var str = ‘‘;
    //异步进行，pid传入后台，返回的json第0项为id 第1项为地区名
    //循环拼接option，放入html
    $.ajax({
        type:"post",success:function(data){
            for(var i = 0; i < data.length; i++){
                str += "<option value=‘"+data[i][0]+"‘>"+data[i][1]+"</option>";
            }
            $(‘#qu‘).html(str);
        }
    });
}

PHP

<?PHP
    $db = new MysqLi(‘localhost‘,‘root‘,‘1‘,‘test‘);
    !MysqLi_connect_error() or die (‘连接错误‘);
    $db->query(‘set names utf8‘);
    //获取传值pid
    $pcode = $_POST[‘pcode‘];
    //查找当前pid下的所有内容
    $sql = "select *  from dt_area where pid = $pcode";
    $res = $db->query($sql);
    $attr = $res->fetch_all();
    //返回json格式
    echo json_encode($attr);
?>

注意：

　　这里的ajax使用同步传输方式，因为当省执行完市才能拿到省的id值。