如何从下拉菜单中显示内容（选项）

Question

我想要做的是创建一个用户下拉列表（选项）

当用户从下往下选择选项时，它将在文本区域上显示其内容/评论

<Option id="1"> Cancel </option>
<Option id="2"> Renew </option>     
<P><div id="1"> this is content of cancellation</p></div>

因此，当用户选择取消时，它将在文本区域或法线区域中显示其内容

Answer 1

这是jquery版本，你不应该使用相同的id与选项和div取消文本。

我还建议您使用带有值而不是id="1"的选项，在这种情况下，您没有为选项设置值，因此它将文本作为选项值。

$("#myoption").change(function(){
      var selected = $(this).val();
      if(selected == "Cancel"){

        $('textarea').text($('#canceltext').text());
      }else{
        $('textarea').text(selected);
      }
    })

$("#myoption").change(function(){
  var selected = $(this).val();
  if(selected == "Cancel"){
  
    $('textarea').text($('#canceltext').text());
  }else{
    $('textarea').text(selected);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myoption">
<option value="">Select...</option>
<option id="1"> Cancel </option>
<option id="2"> Renew </option>    
</select>
<div id="canceltext"><p>this is content of cancellation</p></div>
<textarea></textarea>

Answer 2

听取select的变化，然后设置textContent的div：

document.getElementById("select").addEventListener("change", () => {
  document.getElementById("myDiv").textContent = document.getElementById("select").value;
});

<select id="select">
  <option id="1" value="Cancel"> Cancel </option>
  <option id="2" value="Renew"> Renew </option>
</select>
<div id="myDiv">Replacement Text</div>