使用JavaScript中变量定义省份及对应的城市,应用Select标签对象,实现二级级联的下拉菜单选中效果。也就是说,在省份下拉菜单中,选中一个省份时,在城市下拉菜单中出现对应城市选择内容。
时间: 2024-02-12 16:09:17 浏览: 57
jquery基于layui实现二级联动下拉选择(省份城市选择)
好的,我来为你解答。你可以按照以下步骤实现:
1. 定义一个包含省份和对应城市的 JavaScript 对象,例如:
```
var cities = {
"广东省": ["广州市", "深圳市", "珠海市", "汕头市"],
"湖南省": ["长沙市", "株洲市", "湘潭市", "衡阳市"],
"河南省": ["郑州市", "开封市", "洛阳市", "平顶山市"]
}
```
2. 在 HTML 中创建两个 Select 标签,一个用于显示省份,一个用于显示城市。例如:
```
<select id="province"></select>
<select id="city"></select>
```
3. 在 JavaScript 中为省份 Select 标签添加选项。例如:
```
var provinceSelect = document.getElementById("province");
for (var province in cities) {
var option = document.createElement("option");
option.text = province;
provinceSelect.add(option);
}
```
4. 为省份 Select 标签添加 onchange 事件,当省份发生变化时,根据选中的省份更新城市 Select 标签的选项。例如:
```
provinceSelect.onchange = function() {
var citySelect = document.getElementById("city");
var province = this.value;
var cityList = cities[province];
citySelect.options.length = 0;
for (var i = 0; i < cityList.length; i++) {
var option = document.createElement("option");
option.text = cityList[i];
citySelect.add(option);
}
}
```
这样,当用户选择省份时,城市 Select 标签会根据选择的省份更新对应的城市选项。
希望我的回答能够帮助到你。
阅读全文