這是一個(gè)簡(jiǎn)單的表單示例
<!DOCTYPE html>
<html>
<head>
<title>下拉聯(lián)動(dòng)表單</title>
</head> <body>
<h2>請(qǐng)選擇城市和對(duì)應(yīng)的景點(diǎn)：</h2>
<form action="" method="post">
<label for="city">選擇城市：</label>
<select name="city" id="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">廣州</option>
</select>
<label for="spot">選擇景點(diǎn)：</label>
<select name="spot" id="spot">
<option value="">請(qǐng)選擇景點(diǎn)</option>
</select>
<input type="submit" value="提交">
</form>
<script>
document.getElementById('city').addEventListener('change', function() {
var city = this.value;
var spotSelect = document.getElementById('spot');
spotSelect.innerHTML = '';
if(city === 'beijing') {
var spots = ['故宮', '長(zhǎng)城', '頤和園'];
} else if(city === 'shanghai') {
var spots = ['外灘', '東方明珠', '豫園'];
} else if(city === 'guangzhou') {
var spots = ['珠江夜游', '廣州塔', '白云山'];
}
for(var i = 0; i < spots.length; i++) {
var option = document.createElement('option');
option.text = spots[i];
option.value = spots[i];
spotSelect.add(option);
}
});
</script>
</body>
</html>