如何在所選的值選項中添加javascript中的元素

Question

我想添加選中值選項的元素<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>元件。

如何讓它使用nativ 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>

Answer 2

首先，我建議你給你想要放入文本的<p>提供一個類或ID。但是下面的內容會讓你開始。

$('#select').on('change', function() { 
    $('p').text($('#select').val()); 
}); 

Answer 3

用純JavaScript你可以這樣做創建一個外部函數並在變化時調用它。

<script> 

     var create_p= function() 
     { 
      var number =document.getElementById('select').value; 
      document.getElementById("add").innerHTML='<p>'+number+'</p>'; 
     } 

     </script> 
    <select id='select' onchange="create_p()"> 
      <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> 
     <div id="add"> 

     </div>