选择框值变更时input字段无法显示文本，求JS基础级解决方案

你的问题出在input元素的内容设置方式错误：普通HTML元素（如<p>、<div>）用innerHTML设置内容，但<input>这类表单控件需要通过value属性来设置显示的文本。

修正后的JavaScript代码 #

function myFunction() {
  var selectedValue = document.getElementById("mySelect").value;
  // 用value属性替换innerHTML
  document.getElementById("demo").value = "You selected: " + selectedValue;
}

完整可运行代码示例 #

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<input type="text" id="demo" style="height: 200px">

额外说明 #

• <input>是自闭合标签，规范写法不需要</input>，浏览器虽兼容冗余写法，但建议遵循标准
• 如果需要多行输入，可将<input>替换为<textarea id="demo" style="height:200px"></textarea>，此时用innerHTML或value都能生效

内容的提问来源于stack exchange，提问作者Pentakota Lalith Prasad