基于jQuery实现级联下拉菜单（jQuery JavaScript）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>级联下拉菜单示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="province">
<option value="">请选择省份</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu">江苏</option>
</select>
<select id="city">
<option value="">请选择城市</option>
</select>
<script>
$(document).ready(function() {
var cities = {
"zhejiang": ["hangzhou", "huzhou", "jinhua"],
"jiangsu": ["nanjing", "suzhou", "yangzhou"]
};
$('#province').change(function() {
var province = $(this).val();
var $citySelect = $('#city');
$citySelect.find('option').remove(); // 清空城市下拉菜单
if (province in cities) {
var cityOptions = cities[province].map(function(city) {
return $('<option>').text(city).val(city);
});
$citySelect.append($('<option>').text('请选择城市'));
$citySelect.append(cityOptions);
} else {
$citySelect.append($('<option>').text('请选择城市').attr('selected', true));
}
});
});
</script>
</body>
</html>这段代码实现了一个简单的级联下拉菜单。当用户在省份下拉菜单中选择一个省份时，城市下拉菜单会更新为对应省份的城市列表。这个例子使用了jQuery来处理DOM元素的变化和事件绑定，并展示了如何通过JavaScript对象存储数据以及如何使用数组的map函数来生成元素列表。
评论已关闭