实现二级联动菜单：从原生JavaScript到Vue.js

最新推荐文章于 2025-04-26 22:40:46 发布

友人.227

最新推荐文章于 2025-04-26 22:40:46 发布

阅读量378

点赞数 5

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/weixin_66708577/article/details/145242481

版权

在Web开发中，二级联动菜单是一种常见的功能，用于根据用户选择的省份动态显示对应的城市。本文将通过两个示例，分别使用原生JavaScript和Vue.js实现二级联动菜单，帮助你理解不同技术栈下的实现方法。

一、原生JavaScript实现

1.1 HTML结构

首先，我们创建一个简单的表单，包含两个下拉菜单：一个用于选择省份，另一个用于选择城市。

<form>
    <!-- onchange="loadCity()"   -->
    province:<select onchange="loadCity();" id="province" required>
        <option>--select--</option>
    </select>

    city:<select id="city" required>
        <option>--select--</option>
    </select>
</form>

1.2 JavaScript逻辑

接下来，我们使用JavaScript实现省份和城市的动态加载。

<script>
    var provinceList = new Array();
    provinceList["广东省"] = ["广州", "深圳", "佛山", "珠海", "汕头"];
    provinceList["四川省"] = ["成都", "德阳", "绵阳", &#