好的,以下是一个简单的HTML实现省份和城市的下拉框联动的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>省份和城市下拉框联动</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 定义省份和城市数据
var provinceData = {
"北京市": ["北京市"],
"上海市": ["上海市"],
"天津市": ["天津市"],
"重庆市": ["重庆市"],
"河北省": ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"],
"山西省": ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"],
"辽宁省": ["沈阳市", "大连市", "鞍山市", "抚顺市", "本溪市", "丹东市", "锦州市", "营口市", "阜新市", "辽阳市", "盘锦市", "铁岭市", "朝阳市", "葫芦岛市"],
};
// 初始化省份下拉框
var provinceSelector = $("#province");
for (var province in provinceData) {
var option = $("<option>").val(province).text(province);
provinceSelector.append(option);
}
// 省份下拉框改变事件
provinceSelector.change(function(){
var province = $(this).val();
var cityData = provinceData[province];
var citySelector = $("#city");
citySelector.empty();
for (var i in cityData) {
var option = $("<option>").val(cityData[i]).text(cityData[i]);
citySelector.append(option);
}
});
});
</script>
</head>
<body>
<label for="province">省份:</label>
<select id="province">
<option value="">请选择</option>
</select>
<label for="city">城市:</label>
<select id="city">
<option value="">请选择</option>
</select>
</body>
</html>
```
该代码使用了jQuery库来简化DOM操作。在代码中,首先定义了一个`provinceData`对象,其中键为省份名称,值为该省份下的城市数组。然后通过jQuery来初始化省份下拉框,以及定义其改变事件。当省份下拉框改变时,根据选中的省份,动态生成相应的城市下拉框选项。