ajax省市区三级联动

快来打我* 2022-07-14 17:13 401阅读 0赞

本文思路页面加载时通过ajax向后台请求省级数据，通过onchange事件，根据选择的省向后台请求市级数据，同样添加onchange事件，根据市向后台请求区级数据。  
html代码

<div class="col-sm-4">
            <select id="province" name="province" class="form-control" >
                    <option value="${provinces.pubCode}">${provinces.nodeName}</option>
            </select>
    </div>
    <div class="col-sm-4">
            <select id="city" name="city" class="form-control" >
                    <option value="${city.pubCode}">${city.nodeName}</option>
            </select>
    </div>
    <div class="col-sm-4">
            <select id="areaCode" name="areaCode" class="form-control" >
                    <option value="${areaCode.pubCode}">${areaCode.nodeName}</option>
            </select>
    </div>

js代码

/* 加载区域省份信息*/
    $(document).ready(function() { 
    /* 第一个参数是下拉框ID,第二个参数1代表省，2代表市，3代表区 */
        loadProvinces("province","1","");
        $("#province").on('change',function(){ 
            loadProvinces("city","2",$("#province").val());
        });
        $("#city").on('change',function(){ 
            loadProvinces("areaCode","3",$("#city").val());
        });
    });
    function loadProvinces(selectId,nodeLevel,parentCode){ 
    $.get("${ctx}/sys/provinces/getProvincesList?nodeLevel="+nodeLevel+"&parentCode="+parentCode,function(data,status){ 
            if(data!=null && data.length >0){
                var str = "";
                str += ("<option value=''>请选择</option>");
                for(var _i=0;_i<data.length;_i++){
                    str +=("<option value='"+data[_i].pubCode+"'>"+data[_i].nodeName+"</option>");
                }
                $("#"+selectId).html(str);
            }
        },"json");
    }

怎么样，是不是很简单