在前端交互开发中，根据下拉菜单的选中值动态加载对应数据是非常常见的需求，比如选择城市后加载该城市的区域列表、选择商品分类后加载对应分类的商品等。下面我们就一步步实现这个功能。
一、获取下拉菜单选中值的方法
首先我们需要先拿到下拉菜单的DOM元素，再通过对应的属性获取选中值，常见的下拉菜单是<select>标签，获取选中值有两种常用方式。
1. 通过value属性获取
<select>元素的value属性会直接返回当前选中<option>的value值，如果<option>没有设置value属性，就会返回<option>的文本内容。
<select id="citySelect"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select>
对应的JS获取代码：
// 获取下拉菜单元素
const selectEl = document.getElementById('citySelect');
// 获取选中值
const selectedValue = selectEl.value;
console.log(selectedValue); // 选中北京时输出 bj2. 通过selectedOptions属性获取
如果需要同时拿到选中项的文本和其他自定义属性，可以使用selectedOptions属性，它会返回当前选中的<option>元素集合。
const selectEl = document.getElementById('citySelect');
// 获取选中的option元素
const selectedOption = selectEl.selectedOptions[0];
// 获取value
const value = selectedOption.value;
// 获取文本内容
const text = selectedOption.textContent;
// 获取自定义属性，比如data-id
const customId = selectedOption.dataset.id;二、监听下拉菜单的选中变化事件
我们需要在用户切换下拉菜单选项时触发数据加载逻辑，所以要给<select>元素绑定change事件。
const selectEl = document.getElementById('citySelect');
selectEl.addEventListener('change', function() {
// 获取选中值
const selectedValue = this.value;
// 调用加载数据的方法
loadDataByValue(selectedValue);
});三、动态加载数据并更新页面
拿到选中值之后，我们可以发送请求获取对应数据，然后动态渲染到页面中，这里用模拟数据的方式演示，实际开发中替换为真实接口即可。
1. 模拟数据请求
// 模拟数据，实际开发中替换为fetch或axios请求
const mockData = {
bj: ['朝阳区', '海淀区', '丰台区', '东城区'],
sh: ['浦东新区', '徐汇区', '静安区', '黄浦区'],
gz: ['天河区', '越秀区', '海珠区', '荔湾区']
};
function fetchData(selectValue) {
return new Promise((resolve) => {
// 模拟接口延迟
setTimeout(() => {
resolve(mockData[selectValue] || []);
}, 500);
});
}2. 加载数据并渲染页面
async function loadDataByValue(selectValue) {
// 显示加载状态
const resultEl = document.getElementById('result');
resultEl.innerHTML = '<p>数据加载中...</p>';
try {
// 获取对应数据
const dataList = await fetchData(selectValue);
// 清空原有内容
resultEl.innerHTML = '';
// 如果没有数据，显示提示
if (dataList.length === 0) {
resultEl.innerHTML = '<p>暂无对应数据</p>';
return;
}
// 创建列表元素
const ulEl = document.createElement('ul');
dataList.forEach(item => {
const liEl = document.createElement('li');
liEl.textContent = item;
ulEl.appendChild(liEl);
});
// 插入到页面
resultEl.appendChild(ulEl);
} catch (error) {
resultEl.innerHTML = '<p>数据加载失败，请重试</p>';
console.error('加载数据失败:', error);
}
}四、完整示例代码
下面是可直接运行的完整示例，复制后保存为HTML文件即可查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单动态加载数据示例</title>
</head>
<body>
<h3>选择城市查看对应区域</h3>
<select id="citySelect">
<option value="">请选择城市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<div id="result" style="margin-top: 20px;"></div>
<script>
const mockData = {
bj: ['朝阳区', '海淀区', '丰台区', '东城区'],
sh: ['浦东新区', '徐汇区', '静安区', '黄浦区'],
gz: ['天河区', '越秀区', '海珠区', '荔湾区']
};
function fetchData(selectValue) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockData[selectValue] || []);
}, 500);
});
}
async function loadDataByValue(selectValue) {
const resultEl = document.getElementById('result');
if (!selectValue) {
resultEl.innerHTML = '';
return;
}
resultEl.innerHTML = '<p>数据加载中...</p>';
try {
const dataList = await fetchData(selectValue);
resultEl.innerHTML = '';
if (dataList.length === 0) {
resultEl.innerHTML = '<p>暂无对应数据</p>';
return;
}
const ulEl = document.createElement('ul');
dataList.forEach(item => {
const liEl = document.createElement('li');
liEl.textContent = item;
ulEl.appendChild(liEl);
});
resultEl.appendChild(ulEl);
} catch (error) {
resultEl.innerHTML = '<p>数据加载失败，请重试</p>';
console.error('加载数据失败:', error);
}
}
const selectEl = document.getElementById('citySelect');
selectEl.addEventListener('change', function() {
loadDataByValue(this.value);
});
</script>
</body>
</html>五、注意事项
- 如果下拉菜单是动态生成的，需要在元素渲染完成后再获取DOM和绑定事件，或者使用事件委托的方式绑定change事件。
- 真实接口请求时，要注意处理网络错误、接口异常等情况，给用户友好的提示。
- 如果选中值需要持久化或者页面初始化时需要默认选中某个值，可以在页面加载完成后主动调用一次loadDataByValue方法，传入默认选中值。
JavaScript下拉菜单选中值动态加载数据DOM操作修改时间：2026-06-06 00:27:34