如何用JavaScript将下拉框选中值显示在非<input>元素中？

把原来的<input>换成普通的HTML显示元素就行，比如<div>或者<span>，这类元素默认不可编辑，样式也更容易调整。然后修改JS里的赋值逻辑，从设置value改成设置元素的文本内容。

给你一个完整的示例：

<!-- 下拉列表，绑定change事件触发更新 -->
<select id="list-category" onchange="update()">
  <option value="cat1">分类一</option>
  <option value="cat2">分类二</option>
  <option value="cat3">分类三</option>
</select>

<!-- 用来展示选中文本的容器，用div是块级元素，span是行内，按需选择 -->
<div id="display-text"></div>

<script type="text/javascript">
  function update() {
      var select = document.getElementById('list-category');
      var selectedOption = select.options[select.selectedIndex];
      // 用textContent设置元素的文本内容，比innerText兼容性更好
      document.getElementById('display-text').textContent = selectedOption.text;
  }
  // 页面加载时先显示默认选中的选项
  update();
</script>

如果想要让显示区域更美观，可以加一点CSS样式，比如：

#display-text {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 8px;
  background-color: #f8f8f8;
}

另外你提到的console.write是用法错误，正确的控制台输出是console.log()，但这个是输出到浏览器的开发者工具控制台里，不会显示在页面上，所以不能用来做页面的文本展示。

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