二级联动是web开发中常用的一个功能，它可以让用户在第一个下拉菜单选择一个选项后，第二个下拉菜单展示与之对应的选项。本文将介绍如何使用JavaScript实现一个简单的二级联动效果。
HTML结构
首先，我们需要在HTML中创建两个下拉菜单，并分别给它们定义id，用于在JavaScript中获取和操作。代码如下：
-- -------------------- ---- ------- ------- -------------- ------- ----------------------- ------- ---------------------- ------- ---------------------- ------- ---------------------- --------- ------- ---------- ------- ----------------------- ---------
数据准备
接下来，我们需要准备好省份和城市的数据。这里我们使用一个对象来存储所有省份和城市的信息。代码如下：
var data = {
"北京": ["朝阳区", "海淀区", "东城区"],
"上海": ["浦东新区", "徐汇区", "黄浦区"],
"广东": ["广州市", "深圳市", "珠海市"]
};实现二级联动
接下来，我们开始实现二级联动的核心部分。当用户选择了省份后，应该更新城市下拉菜单的选项。我们需要监听省份下拉菜单的选择事件，当用户选择一个省份时，我们可以根据选择的值来获取对应的城市列表，并将这些城市添加到城市下拉菜单中。代码如下：
-- -------------------- ---- -------
-- -----------
--- ----------- - ------------------------------------
--- ------- - --------------------------------
-- ----------------
-------------------------------------- ---------- -
-- -------
--- ---------------- - ------------------
-- --------------
------------------------------------
---
-- -----------
-------- ----------------------------------- -
-- ---------
----------------- - -------- -------------------------
-- ----------------
--- ------ - -----------------------
-- ----------------------
--- ---- - - -- - - -------------- ---- -
--- ------ - ---------------------------------
------------ - ----------
----------- - ----------
----------------------------
-
-示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
------- --------------
------- -----------------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
------- ----------
------- -----------------------
---------
--------
--- ---- - -
----- ------- ------ -------
----- -------- ------ -------
----- ------- ------ ------
--
--- ----------- - ------------------------------------
--- ------- - --------------------------------
-------------------------------------- ---------- -
--- ---------------- - ------------------
------------------------------------
---
-------- ----------------------------------- -
----------------- - -------- -------------------------
--- ------ - -----------------------
--- -
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------