javascript利用selected属性实现市区二级联动
时间: 2023-07-24 07:01:29 浏览: 47
### 回答1:
在JavaScript中,利用selected属性可以实现市区二级联动的效果。首先,需要在HTML中定义两个下拉列表,一个用于显示市,另一个用于显示区。然后,通过JavaScript获取这两个下拉列表的元素。
接下来,在代码中定义一个存储市和区的对象。对象的每个属性代表一个市,属性的值为一个数组,数组中的每个元素代表该市的一个区。例如:
var data = {
"上海市": ["黄浦区", "徐汇区", "静安区"],
"北京市": ["东城区", "西城区", "朝阳区"],
// 其他省市和区...
};
然后,定义一个函数,用于根据所选的市动态生成对应的区。函数首先清空已有的区列表,然后根据所选的市获取对应的区数组。遍历区数组,动态创建option元素,并根据需要设置selected属性,最后将option元素添加到区下拉列表中。例如:
function generateDistricts(){
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
var selectedCity = citySelect.value;
var districts = data[selectedCity];
// 清空已有的区列表
districtSelect.innerHTML = "";
// 动态生成区下拉列表
for(var i = 0; i < districts.length; i++){
var option = document.createElement("option");
option.text = districts[i];
// 根据需要设置selected属性
if(i === 0){
option.selected = true;
}
districtSelect.add(option);
}
}
最后,将上述函数与市下拉列表的change事件关联起来,这样当选择不同的市时,区下拉列表会动态变化。例如:
var citySelect = document.getElementById("city");
citySelect.addEventListener("change", generateDistricts);
通过上述方法,利用JavaScript的selected属性可以实现市区二级联动的效果。
### 回答2:
Javascript利用selected属性实现市区二级联动的实现方法如下:
1. 首先,在HTML中创建两个<select>元素,一个用于选择市区,一个用于选择区域,分别设置相应的id属性。
2. 在Javascript中,使用document.getElementById()方法获取到市区<select>元素和区域<select>元素的引用。
3. 给市区<select>元素添加change事件监听器,当市区选择发生变化时触发该事件。
4. 在事件处理函数中,首先使用selected属性获取到当前选中的市区的选项值。
5. 根据选中的市区的值,动态生成相应的区域选项。
6. 遍历区域选项,为每个选项创建新的<option>元素,并将其添加到区域<select>元素中。
下面是具体实现的代码示例:
HTML代码:
```html
<select id="citySelect">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
<select id="areaSelect">
</select>
```
Javascript代码:
```javascript
// 获取市区选择元素和区域选择元素的引用
var citySelect = document.getElementById("citySelect");
var areaSelect = document.getElementById("areaSelect");
// 添加市区选择变化事件监听器
citySelect.addEventListener("change", function() {
// 获取当前选中的市区选项值
var selectedCity = citySelect.value;
// 根据市区选项值生成区域选项
switch(selectedCity) {
case "beijing":
areaSelect.innerHTML = "<option value='dongcheng'>东城</option><option value='xicheng'>西城</option>";
break;
case "shanghai":
areaSelect.innerHTML = "<option value='huangpu'>黄浦</option><option value='xuhui'>徐汇</option>";
break;
case "guangzhou":
areaSelect.innerHTML = "<option value='yuexiu'>越秀</option><option value='tianhe'>天河</option>";
break;
default:
areaSelect.innerHTML = "";
}
});
```
以上代码实现了一个简单的市区二级联动效果,当选择不同的市区时,会动态生成对应的区域选项。具体的区域选项可以根据实际需求进行修改和扩展。