前端（HTML）——Ajax实现省、市、县联动




<!DOCTYPE html>
<html>
<head>
    <title>省市县联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // 初始化省份下拉菜单
            $.getJSON("province.json", function(data){
                var select = $('#province');
                select.find('option').remove();
                $.each(data, function(key, value) {
                    select.append($('<option></option>').attr('value', key).text(value));
                });
            });
 
            // 省份变化时，更新城市下拉菜单
            $('#province').change(function(){
                var provinceId = $(this).val();
                $.getJSON("city.json", function(data){
                    var select = $('#city');
                    select.find('option').remove();
                    $.each(data[provinceId], function(key, value) {
                        select.append($('<option></option>').attr('value', key).text(value));
                    });
                });
            });
 
            // 城市变化时，更新区/县下拉菜单
            $('#city').change(function(){
                var cityId = $(this).val();
                $.getJSON("county.json", function(data){
                    var select = $('#county');
                    select.find('option').remove();
                    $.each(data[cityId], function(key, value) {
                        select.append($('<option></option>').attr('value', key).text(value));
                    });
                });
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        省份：<select id="province"></select>
        城市：<select id="city"></select>
        区/县：<select id="county"></select>
    </form>
</body>
</html>

在这个示例中，我们使用jQuery和Ajax来实现了省市县的联动效果。首先，我们通过Ajax请求获取省份数据，并填充到省份下拉菜单中。然后，当省份发生变化时，我们通过Ajax请求获取相应省份的城市数据，并更新到城市下拉菜单。类似地，当城市发生变化时，我们通过Ajax请求获取相应城市的区/县数据，并更新到区/县下拉菜单。

注意：这里假设有province.json、city.json和county.json三个JSON文件，分别存储省份、城市和区/县的数据。实际使用时，需要根据实际的数据结构和API来调整Ajax请求的URL和处理逻辑。

前端（HTML）——Ajax实现省、市、县联动

评论已关闭

推荐阅读