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

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与option和div一起使用来取消文本。

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

$("#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上侦听更改，然后设置div的textContent ：

 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>