如何设置HTML下拉框默认选中值的对应文本初始显示？

嗨，这个需求很好实现，最简洁且可复用的方式有两个关键点：

• 页面加载时主动触发一次你的处理函数，因为原来的函数只在下拉框onchange时执行，页面初始化时不会自动运行；
• 简化你的myFunction逻辑——其实你不需要写那么多else if，不管选中哪个选项，输出格式都是一致的，直接统一处理就行。

修改后的完整代码 #

<select name="test" id="mySelect" onchange="myFunction()"> 
  <option value="one">1</option> 
  <option value="two">2</option> 
  <option value="three">3</option> 
</select> 
<p id="demo"></p>

<script>
function myFunction() { 
  var selectedValue = document.getElementById("mySelect").value; 
  document.getElementById("demo").innerHTML = "You selected: " + selectedValue; 
} 

// 页面加载完成后立即调用函数，显示默认选中项的文本
window.onload = myFunction;
</script>

为什么这么做？ #

1. window.onload = myFunction：这个语句会在整个页面的DOM和资源都加载完成后，自动执行myFunction，这样页面一打开就会读取下拉框默认选中的one值，把对应的文本渲染到demo元素里。
2. 简化函数逻辑：原来的多分支判断完全没必要，因为所有选项的输出格式都是"You selected: " + 值，直接统一赋值即可，既减少冗余代码，也方便后续添加新选项时不用修改函数。

如果你不想用window.onload，也可以把函数调用放在script标签的最后（DOM元素之后），比如：

<script>
function myFunction() { /* ... */ }
// 直接调用，此时DOM已经加载完成
myFunction();
</script>

这种方式比window.onload触发得更早，因为它不需要等所有资源加载完，只要DOM元素解析完成就能执行，对于这个需求来说也完全适用。

内容的提问来源于stack exchange，提问作者D.Ge.