如何通过JavaScript事件将下拉列表选中值传递到div元素并展示

问题修正说明 #

你现有代码存在两处可直接运行的错误：

• innerText是DOM元素属性，不可作为方法调用，需改为赋值语法
• select标签上绑定的onmousedown事件代码无效，原生DOM没有html属性，该代码会导致下拉列表点击后清空选项，直接删除即可

实现方案1：展示选中项的value值（匹配你原有逻辑） #

修正后JS代码

function jsFunction(value) {
  const div1 = document.getElementById('div1')
  // 每次选中追加新段落
  const newparagraph = document.createElement("p");
  newparagraph.innerText = value;
  div1.appendChild(newparagraph);

  // 如果需要每次选中替换内容而非追加，替换上面三行为下方代码即可
  // div1.innerText = value
}

修正后HTML代码

<select id="ddl" name="ddl" onchange="jsFunction(this.value);">
  <option id="Audi1" value='1'>Audi</option>
  <option id="Mercedes2" value='2'>Mercedes</option>
  <option id="BMW3" value='3'>BMW</option>
</select>
<div id="div1">

</div>

实现方案2：展示选中项的品牌名称（更符合常规使用场景） #

如果需要显示Audi、Mercedes这类文字而非数字value，调整传参逻辑即可：

JS代码

function jsFunction(selectEl) {
  // 获取选中项的文本内容
  const selectedText = selectEl.options[selectEl.selectedIndex].text
  const div1 = document.getElementById('div1')
  const newparagraph = document.createElement("p");
  newparagraph.innerText = selectedText;
  div1.appendChild(newparagraph);
}

HTML代码（仅修改onchange传参）

<select id="ddl" name="ddl" onchange="jsFunction(this);">
  <option id="Audi1" value='1'>Audi</option>
  <option id="Mercedes2" value='2'>Mercedes</option>
  <option id="BMW3" value='3'>BMW</option>
</select>
<div id="div1">

</div>

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