javascript二级联动下拉框实现教程

"使用JavaScript实现二级联动下拉框的基本示例" 在网页开发中，有时候我们需要根据用户在第一个下拉框（通常是省/自治区）的选择，动态更新第二个下拉框（通常是市/地区）的内容。这种功能被称为二级联动下拉框，它提供了更加交互式的用户体验。以下是一个使用JavaScript实现的简单二级联动下拉框的例子。 首先，HTML结构是基础，它包含了两个`<select>`元素，分别代表省份和城市。这两个下拉框通常会有一个初始的提示选项，例如"请选择"或"全部"。 ```html <select name="province" onchange="getCity()" id="province"> <!-- 省份选项 --> </select> <select name="city" id="city"> <option value="">请选择城市</option> </select> ``` JavaScript部分是实现联动的关键。在这个例子中，我们定义了一个二维数组`city`，存储了各个省份及其对应的城市列表。数组的索引与省份下拉框的`selectedIndex`相对应，这样可以通过获取省份的选中索引来找到对应的城市数组。 ```javascript var city = [ ["北京", "天津", "上海", "重庆"], // 省份1的城市 ["南京", "苏州", "南通", "常州"], // 省份2的城市 // ... ]; ``` 当省份下拉框的`onchange`事件触发时，调用`getCity()`函数，该函数负责更新城市下拉框的内容： 1. 获取省份下拉框对象(`sltProvince`)和城市下拉框对象(`sltCity`)。 2. 根据`sltProvince.selectedIndex - 1`获取当前选中省份的城市数组。 3. 清空城市下拉框，只保留提示选项。 4. 遍历城市数组，为每个城市创建新的`<option>`元素，并添加到城市下拉框中。 ```javascript function getCity() { var sltProvince = document.form1.province; var sltCity = document.form1.city; var provinceCity = city[sltProvince.selectedIndex - 1]; sltCity.length = 1; for (var i = 0; i < provinceCity.length; i++) { sltCity[i + 1] = new Option(provinceCity[i], provinceCity[i]); } } ``` 这个简单的例子展示了如何使用JavaScript动态地更新下拉框的内容，以实现二级联动效果。实际应用中，你可能需要根据实际数据结构和需求进行调整，例如从服务器获取数据、处理更复杂的多级联动等。但基本思路和这个示例是相似的：监听第一个下拉框的变化，然后根据其选择更新第二个下拉框的内容。