好的，下面是一个简单的
HTML+
CSS级联
选择器示例。
首先，我们需要创建
HTML结构。在这个例子中，我们将使用三个下拉菜单，分别选择省、市和县/区。
```
html
<div class="select-wrapper">
<select id="province">
<option value="">请选择省份</option>
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option value="guangdong">广东省</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<select id="area">
<option value="">请选择区域</option>
</select>
</div>
```
然后，我们需要使用
CSS来为这些下拉菜单添加样式，并使用JavaScript来实现级联
选择器的功能。
```
css
.select-wrapper select {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
font-size: 16px;
}
.select-wrapper select:last-child {
margin-right: 0;
}
```
最后，我们需要使用JavaScript来实现级联
选择器的功能。具体来说，我们需要在省份下拉菜单选择后，动态生成对应城市的选项；在城市下拉菜单选择后，动态生成对应区县的选项。
```javascript
var cities = {
beijing: ["北京市"],
shanghai: ["上海市"],
guangdong: ["广州市", "深圳市", "珠海市", "汕头市"],
};
var areas = {
"北京市": ["东城区", "西城区", "朝阳区", "海淀区"],
"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区"],
"广州市": ["天河区", "越秀区", "荔湾区", "海珠区"],
"深圳市": ["福田区", "罗湖区", "南山区", "宝安区"],
"珠海市": ["香洲区", "斗门区", "金湾区"],
"汕头市": ["金平区", "龙湖区", "澄海区", "潮阳区"],
};
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");
province.addEventListener("change", function() {
var selectedProvince = this.value;
city.inner
HTML = "<option value=''>请选择城市</option>";
area.inner
HTML = "<option value=''>请选择区域</option>";
if (selectedProvince) {
for (var i = 0; i < cities[selectedProvince].length; i++) {
var option = document.createElement("option");
option.value = cities[selectedProvince][i];
option.innerText = cities[selectedProvince][i];
city.appendChild(option);
}
}
});
city.addEventListener("change", function() {
var selectedCity = this.value;
area.inner
HTML = "<option value=''>请选择区域</option>";
if (selectedCity) {
for (var i = 0; i < areas[selectedCity].length; i++) {
var option = document.createElement("option");
option.value = areas[selectedCity][i];
option.innerText = areas[selectedCity][i];
area.appendChild(option);
}
}
});
```
这样，我们就完成了一个简单的
HTML+
CSS级联
选择器的编写。
最低0.47元/天 解锁文章
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
