使用JavaScript实现省市县三级联动效果，让你的表单选择更便捷！

以下是基于 jQuery 的实现方法:

HTML 结构：

<select id="province">
    <option value="">请选择省份</option>
    <option value="北京市">北京市</option>
    <option value="上海市">上海市</option>
    <option value="浙江省">浙江省</option>
    <option value="江苏省">江苏省</option>
</select>

<select id="city">
    <option value="">请选择城市</option>
</select>

<select id="area">
    <option value="">请选择区县</option>
</select>

JS代码：

$(function(){
    // 省份选择框改变事件
    $("#province").change(function(){
        var province = $(this).val();
        if(province != ""){
            // 发送ajax请求获取该省份下的城市
            $.ajax({
                type: "GET",
                url: "getCity.php",
                data: {province:province},
                dataType: "json",
                success: function(result){
                    // 清空城市和区县选择框
                    $("#city").html("<option value=''>请选择城市</option>");
                    $("#area").html("<option value=''>请选择区县</option>");
                    // 遍历城市列表，添加到城市选择框中
                    $.each(result,function(index,city){
                        $("#city").append("<option value='"+city+"'>"+city+"</option>");
                    });
                },
                error: function(){
                    alert('获取城市信息失败');
                }
            });
        }else{
            // 清空城市和区县选择框
            $("#city").html("<option value=''>请选择城市</option>");
            $("#area").html("<option value=''>请选择区县</option>");
        }
    });
 
    // 城市选择框改变事件
    $("#city").change(function(){
        var city = $(this).val();
        if(city != ""){
            // 发送ajax请求获取该城市下的区县
            $.ajax({
                type: "GET",
                url: "getArea.php",
                data: {city:city},
                dataType: "json",
                success: function(result){
                    // 清空区县选择框
                    $("#area").html("<option value=''>请选择区县</option>");
                    // 遍历区县列表，添加到区县选择框中
                    $.each(result,function(index,area){
                        $("#area").append("<option value='"+area+"'>"+area+"</option>");
                    });
                },
                error: function(){
                    alert('获取区县信息失败');
                }
            });
        }else{
            // 清空区县选择框
            $("#area").html("<option value=''>请选择区县</option>");
        }
    });
});

PHP代码：

getCity.php

$province = $_GET['province'];

// 根据省份获取城市列表，这里使用数组模拟数据
if($province == '北京市'){
    $cityList = array('北京市');
}elseif($province == '上海市'){
    $cityList = array('上海市');
}elseif($province == '浙江省'){
    $cityList = array('杭州市','宁波市','温州市','绍兴市','湖州市','嘉兴市','金华市','衢州市','舟山市','台州市','丽水市');
}elseif($province == '江苏省'){
    $cityList = array('南京市','无锡市','常州市','苏州市','南通市','扬州市','镇江市','泰州市','盐城市','连云港市','徐州市','淮安市','宿迁市');
}

echo json_encode($cityList);

getArea.php

$city = $_GET['city'];

// 根据城市获取区县列表，这里使用数组模拟数据
if($city == '北京市'){
    $areaList = array('东城区','西城区','朝阳区','丰台区','石景山区','海淀区','顺义区','房山区','大兴区','通州区','密云县','延庆县');
}elseif($city == '上海市'){
    $areaList = array('黄浦区','徐汇区','长宁区','静安区','普陀区','闸北区','虹口区','杨浦区','宝山区','闵行区','嘉定区','浦东新区','金山区','松江区','青浦区','奉贤区');
}elseif($city == '杭州市'){
    $areaList = array('上城区','下城区','江干区','西湖区','滨江区','余杭区','萧山区','拱墅区','富阳区','临安市','桐庐县','淳安县','建德市');
}elseif($city == '宁波市'){
    $areaList = array('海曙区','江北区','北仑区','镇海区','鄞州区','象山县','宁海县','余姚市','慈溪市','奉化市');
}elseif($city == '温州市'){
    $areaList = array('鹿城区','龙湾区','瓯海区','洞头区','永嘉县','平阳县','苍南县','文成县','泰顺县','瑞安市','乐清市');
}elseif($city == '绍兴市'){
    $areaList = array('越城区','柯桥区','上虞区','新昌县','嵊州市','诸暨市');
}elseif($city == '湖州市'){
    $areaList = array('吴兴区','南浔区','长兴县','德清县','安吉县');
}elseif($city == '嘉兴市'){
    $areaList = array('南湖区','秀洲区','嘉善县','海盐县','海宁市','平湖市','桐乡市');
}elseif($city == '金华市'){
    $areaList = array('婺城区','金东区','浦江县','武义县','磐安县','兰溪市','义乌市','东阳市','永康市');
}elseif($city == '衢州市'){
    $areaList = array('柯城区','衢江区','常山县','开化县','龙游县','江山市');
}elseif($city == '舟山市'){
    $areaList = array('定海区','普陀区','岱山县','嵊泗县');
}elseif($city == '台州市'){
    $areaList = array('椒江区','黄岩区','路桥区','玉环县','三门县','天台县','仙居县','温岭市','临海市');
}elseif($city == '丽水市'){
    $areaList = array('莲都区','青田县','缙云县','遂昌县','松阳县','云和县','庆元县','景宁畲族自治县','龙泉市');
}elseif($city == '南京市'){
    $areaList = array('玄武区','秦淮区','鼓楼区','建邺区','栖霞区','雨花台区','江宁区','六合区','浦口区','溧水区','高淳区');
}elseif($city == '无锡市'){
    $areaList = array('锡山区','惠山区','滨湖区','梁溪区','新吴区','江阴市','宜兴市');
}elseif($city == '常州市'){
    $areaList = array('天宁区','钟楼区','新北区','武进区','金坛区','溧阳市');
}elseif($city == '苏州市'){
    $areaList = array('姑苏区','虎丘区','吴中区','相城区','吴江区','常熟市','张家港市','昆山市','太仓市');
}elseif($city == '南通市'){
    $areaList = array('崇川区','港闸区','通州区','海安县','如东县','启东市','如皋市','海门市');
}elseif($city == '扬州市'){
    $areaList = array('广陵区','邗江区','江都区','宝应县','仪征市','高邮市');
}elseif($city == '镇江市'){
    $areaList = array('京口区','润州区','丹徒区','丹阳市','扬中市','句容市');
}elseif($city == '泰州市'){
    $areaList = array('海陵区','高港区','姜堰区','兴化市','泰兴市','靖江市');
}elseif($city == '盐城市'){
    $areaList = array('亭湖区','盐都区','大丰区','响水县','滨海县','阜宁县','射阳县','建湖县','东台市');
}elseif($city == '连云港市'){
    $areaList = array('连云区','海州区','赣榆区','东海县','灌云县','灌南县');
}elseif($city == '徐州市'){
    $areaList = array('鼓楼区','云龙区','贾汪区','泉山区','铜山区','丰县','沛县','睢宁县','新沂市','邳州市');
}elseif($city == '淮安市'){
    $areaList = array('清河区','淮安区','淮阴区','涟水县','洪泽区','盱眙县','金湖县');
}elseif($city == '宿迁市'){
    $areaList = array('宿城区','宿豫区','沭阳县','泗阳县','泗洪县');
}

echo json_encode($areaList);

需要注意的是，这里的城市和区县数据都是使用数组模拟的，实际开发中需要根据实际业务场景进行调整。