Question

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

当用户从下拉菜单中选择选项时，它将在文本区域显示其内容/注释

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

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

Answer 1

收听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>

Answer 2

这是jquery版本，您不应将带有选项和div的相同ID用于取消文本。

我还建议您使用带有值的选项，而不要使用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>

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

2 个答案: