如何使用基於選擇輸入的javascript更改頁面的內容？

Question

比方說，我有一個網頁是這樣的：

<div style="margin:auto;text-align:center;padding-top:10px;"> 
    <form action="" method="POST"> 
     <p style="text-align:center;"> 
     <select> 
      <option value="blogs">blogs.php</option> 
      <option value="portfolio">portfolio.php</option> 
      <option value="contact">contact.php</option> 
      <option value="home">home.php</option> 
     </select> 
     </p> 
     <p style="text-align:center;"> 
      <input type="submit" name="submit" value="Submit"/> 
     </p> 
    </form> 
</div> 

<div class="pagetitle"> 
    <h5>Option Value (for example blogs)</h5> 
</div> 

正如你所看到的，用戶可以從菜單中選擇4個選項中選擇。我想知道，有沒有什麼辦法可以改變這個div的內容=><div class="pagetitle">用javascript onsubmit？例如，如果用戶選用blogs.php，在H5標籤將更改爲<h5>blogs</h5> &如果他選用portfolio.php，它會被更改爲<h5>portfolio</h5>。我真的很感激，如果你知道如何做到這一點...提前致謝！

Answer 1

你需要一個jQuery .change事件綁定到select元素，有它的選擇填充爲H5標籤的文本值

<script> 
    $(document).ready(function(){ 
    $('select').change(function() 
    { 
     $('h5').text($(this).val()); 
    }).change(); // this is optional - it basically invokes the change event as soon as the function is registered. 
}); 
</script> 

例子：https://jsfiddle.net/DinoMyte/6x80vabm/4/

Answer 2

你需要通過添加啓動一個JavaScript函數來處理事件。

<script> 
function changedSelect(x) 
{ 
    document.getElementById('pageTitleDiv').innerHTML = "<h5>"+x+"</h5>"; 
} 
</script> 

然後，當「選擇」框更改時，您需要觸發事件。

<select onchange="changedSelect(this.value)"> 

最後，我會給div一個「ID」，以便它被明確地改變。

<div class="pagetitle" id="pageTitleDiv"> 

Answer 3

使用香草的JavaScript，我添加了一個ID爲select元素，並使用JavaScript來獲得選擇選項的值，然後我更新的DOM元素。

<div style="margin:auto;text-align:center;padding-top:10px;"> 
    <form action="" method="POST"> 
     <p style="text-align:center;"> 
     <select id="myselect"> 
      <option value="blogs">blogs.php</option> 
      <option value="portfolio">portfolio.php</option> 
      <option value="contact">contact.php</option> 
      <option value="home">home.php</option> 
     </select> 
     </p> 
     <p style="text-align:center;"> 
      <input type="submit" name="submit" onclick="myFunction()" value="Submit"/> 
     </p> 
    </form> 
</div> 
<div class="pagetitle"> 
    <h5>Option Value (for example blogs)</h5> 
</div> 
<script> 
function myFunction() { 
    var x = document.getElementById("myselect").selectedIndex; 
    var _value = document.getElementsByTagName("option")[x].value; 
    document.getElementsByTagName('h5')[0].innerText = _value 
} 
</script> 

注意：這可以通過使用vanilla JS或庫的幾種方式來實現，但我認爲這會回答你的問題。