html二级菜单联动省市区

HTML二级菜单联动省市区通常是指网站设计中的一种交互功能，通过JavaScript或jQuery等前端技术实现的动态效果。当用户选择一级菜单中的某个选项时，会联动显示相关的二级菜单，比如省级列表，然后再次选择二级菜单，又会显示出对应的市级或区级列表。这种设计让用户操作更直观，不需要频繁刷新页面，提高了用户体验。

以下是实现这一功能的一个简单示例步骤：

1. HTML结构：创建两个嵌套的`<select>`标签，分别表示一级和二级菜单。

<select id="province">...</select>
<select id="city">...</select>

2. JavaScript/jQuery：给一级菜单添加事件监听，当选中某项时更新二级菜单的选项。

$(document).ready(function() {
    // 初始化省级数据
    var provinces = ...; // 假设这是一个包含省级数据的数组

    $('#province').change(function() {
        var selectedProvince = $(this).val();
        // 根据当前省份从后台获取对应的城市数据并填充到city select
        updateCityOptions(selectedProvince);
    });

    function updateCityOptions(province) {
        $('#city').empty(); // 清空二级菜单
        // 假设cities是一个根据province筛选出的城市数组
        var cities = cities.filter(...); // 过滤出指定省份的城市
        for (var city of cities) {
            $('#city').append('<option value="' + city.id + '">' + city.name + '</option>');
        }
    }
});