三级联动显示城市列表

Posted 2020-08-28

<div class="select">
    <select id="prv" ></select>
    <select id="city" ></select>
    <select id="county" ></select>
</div>

<script>
    var id1=0;
    var id2=0;
    //对应省份下的地址数据获取
    select1();
    function select1(){
        $.ajax({
            url:"/wemall/huigui/area_test.htm",
            data:{type:1},
            success:function(data){
                id1=data[0].areaId;
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<option id=" + data[i].areaId +">"+data[i].areaName+"</option>";
                }
                $("#prv").html(html);
                select2();
            }
        })
    };


    $("#prv").change(function() {
        id1=$(this).find("option:checked").attr("id");
        select2();
    });

    $("#city").change(function() {
        id2=$(this).find("option:checked").attr("id");
        select3();
    });

    //对应市下的地址数据获取  
    function select2(){
        $.ajax({
            url:"/wemall/huigui/area_test.htm",
            data:{type:2,parent_id2:id1},
            success:function(data){
                id2=data[0].areaId;
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<option id=" + data[i].areaId +">"+data[i].areaName+"</option>";
                }
                $("#city").html(html);
                select3();
            }
        })
    };


    //对应县、区下的地址数据获取
    function select3(){
        $.ajax({
            url:"/wemall/huigui/area_test.htm",
            data:{type:2,parent_id2:id2},
            success:function(data){
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<option id=" + data[i].areaId +">"+data[i].areaName+"</option>";
                }
                $("#county").html(html);
            }
        })
    };

</script>