javascript - 如何在选择值选项的情况下在 JavaScript 中添加元素

Question

这个问题已经有答案了:

Get selected value in dropdown list using JavaScript (31 个回答)

已关闭 6 年前。

我想添加元素<p>选择了值选项。

<select id='select'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected="selected">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<p>text</p>
<p>text</p>
<p>text</p>

如果我选择4，元素<p>将出现 4 <p>元素。

如何使用原生 JavaScript 来实现它？不是jquery

Answer 1

如果您正在寻找简单的 JS 实现，那么您可以这样做。

document.addEventListener("DOMContentLoaded", function() {
  let selectEle = document.querySelector("#select");

  function setVal() {
    let val = selectEle.options[selectEle.selectedIndex].value;
    document.querySelector("p").innerText = val;
  }

  selectEle.addEventListener("change", function(event) {
    setVal();
  });
  setVal();
});

<select id='select'>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected="selected">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<p>text</p>