如何使用script标签获取HTML select下拉框选中值并展示

实现方案 #

你只需要做两处修改即可完成需求：

1. 在head预留的script标签内写入触发函数
2. 将函数绑定到select的onchange属性上

1. 函数实现代码（写入script标签内） #

function showSelected() {
  // 读取下拉框选中值
  const selectedValue = document.getElementById('dropdown').value;
  // 将值写入目标h1元素展示
  document.getElementById('h1').textContent = selectedValue;
}
// 可选添加：页面加载完成后自动显示默认选中的第一项
window.addEventListener('load', showSelected);

如果需要显示带中文提示的内容，可以调整赋值逻辑，比如改为：

document.getElementById('h1').textContent = `当前选择的业务类型：${selectedValue}`;

2. select标签绑定函数 #

将原有select标签的onchange=""修改为：

<select class="dropdown" id="dropdown" onchange="showSelected()" >

内容的提问来源于stack exchange，提问作者Navya Malhotra