以下是一个简单的JavaScript省市联动实现的代码示例。这个示例使用了HTML来创建下拉列表，并用JavaScript来填充和联动这些下拉列表。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script src="provinceCity.js"></script> <!-- 假设JavaScript代码保存在这个文件里 -->
</head>
<body>
<select id="province" onchange="loadCities(this.value)">
<option value="">请选择省份</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
// 初始化省份数据
window.onload = function() {
var provinces = [
{name: '北京', value: 'beijing'},
{name: '上海', value: 'shanghai'},
// 假设这里有更多省份...
];
var provinceSelect = document.getElementById('province');
provinces.forEach(function(province) {
var option = new Option(province.name, province.value);
provinceSelect.add(option);
});
};
</script>
</body>
</html>
JavaScript部分（假设保存在`provinceCity.js`文件中）：
function loadCities(provinceValue) {
var citySelect = document.getElementById('city');
citySelect.length = 1; // 清除旧的城市选项
// 这里用静态数据模拟，实际使用时应该从服务器获取数据
var cities = {};
cities['beijing'] = ['东城区', '西城区', '朝阳区'];
cities['shanghai'] = ['黄浦区', '徐汇区', '浦东新区'];
// 假设这里有更多省份对应的城市...
if (cities[provinceValue]) {
cities[provinceValue].forEach(function(city) {
var option = new Option(city, city);
citySelect.add(option);
});
} else {
var option = new Option('无数据', '');
citySelect.add(option);
}
}
请注意，这个示例中的城市数据是静态的，并且直接写在了JavaScript代码中。在实际应用中，你可能需要从服务器动态获取这些数据。这通常涉及到AJAX请求或Fetch API的使用，但在这个简单的示例中，为了保持代码的简洁性，我使用了静态数据。
此外，`window.onload`函数用于在页面加载完成后初始化省份下拉列表。当用户选择省份时，`onchange`事件会触发`loadCities`函数，该函数根据选中的省份值来填充城市下拉列表。如果选中的省份没有对应的城市数据，城市下拉列表将显示“无数据”。