html的select嵌套示例
时间: 2023-10-26 10:05:00 浏览: 43
以下是一个HTML的select嵌套示例:
```
<select id="province">
<option value="">请选择省份</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="广东省">广东省</option>
</select>
<select id="city">
<option value="">请选择城市</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="广州市">广州市</option>
<option value="深圳市">深圳市</option>
<option value="东莞市">东莞市</option>
<option value="佛山市">佛山市</option>
</select>
<script>
// 省份和城市的对应关系
var cityMap = {
'北京市': ['北京市'],
'上海市': ['上海市'],
'广东省': ['广州市', '深圳市', '东莞市', '佛山市']
};
// 省份下拉框发生改变时,根据选择的省份动态生成城市下拉框的选项
document.getElementById('province').addEventListener('change', function() {
var province = this.value;
var citySelect = document.getElementById('city');
citySelect.innerHTML = '<option value="">请选择城市</option>';
if (province && cityMap[province]) {
var cities = cityMap[province];
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.value = cities[i];
option.innerHTML = cities[i];
citySelect.appendChild(option);
}
}
});
</script>
```
该示例中包含两个select下拉框,第一个下拉框用于选择省份,第二个下拉框用于选择城市。当选择省份时,根据省份动态生成城市下拉框的选项。使用JavaScript代码实现了动态生成选项的功能。