根據選定的下拉選項更改div的內部html

你好，我看過這個論壇尋找這個答案。我正在使用select元素來確定給定div的HTML。我試着用選項元素來做這件事，但在閱讀了一些對其他問題的迴應之後，卻被告知它沒有跨瀏覽器友好。其中一些答案我找到了工作，但是當我嘗試調整答案時，一切都崩潰了！我是Javascript新手，下面看起來完全合乎邏輯！（我猜測它沒有）。根據選定的下拉選項更改div的內部html

<html> 

<head> 
    <script type="text/javascript"> 
     function changeFunc() { 
      var selectedValue = selectBox.options[selectBox.selectedIndex].value; 
      var y = document.getelementbyid("demo"); 
      if (selectedValue == "1") { 
       y.innerhtml = "hello"; 
      } else if (selectedValue == "2") { 
       y.innerhtml = "hello 1"; 
      } else if (selectedValue == "3") { 
       y.innerhtml = "hello 2"; 
      } else if (selectedValue == "4") { 
       y.innerhtml = "hello 3"; 
      } 
     } 
    </script> 
</head> 

<body> 
    <select id="selectBox" onchange="changeFunc();"> 
     <option value="1">Option #1</option> 
     <option value="2">Option #2</option> 
     <option value="3">Option #3</option> 
     <option value="4">Option #4</option> 
    </select> 
    <div id="demo"></div> 
</body> 

</html>

來源

2014-10-08 Fintan Creaven

這是你[R找什麼：fiddle link

<html> 
<body> 

<select id="selectBox" onchange="return myFunction();"> 
<option value="1">Option #1</option> 
<option value="2">Option #2</option> 
<option value="3">Option #3</option> 
<option value="4">Option #4</option> 
</select> 
<div id="demo" ></div> 
    <script> 
function myFunction() { 
    var ele = document.getElementById("selectBox"); 
    var selectedValue = ele.options[ele.selectedIndex].value; 

    var y = document.getElementById("demo"); 
    if(selectedValue=="1"){ 
     y.innerHTML = "hello"; 
    } 
    else if(selectedValue=="2"){ 
     y.innerHTML = "hello 1"; 
    } 
    else if(selectedValue=="3"){ 
     y.innerHTML = "hello 2"; 
    } 
    else if(selectedValue=="4"){ 
     y.innerHTML = "hello 3"; 
    } 
} 
    </script> 
<body> 
</html>

來源

2014-10-08 06:16:57

提供的小提琴鏈接太:) – 2014-10-08 06:37:37

你好特亞吉和Chianh，感謝您的快速反應。這兩個答案都不適合我。我將代碼示例（Tyagi）直接插入到我的編輯器中。 – 2014-10-08 06:44:23

請確保你在上面顯示的身體內寫入了你的javascript。 – 2014-10-08 06:47:35

根據選定的下拉選項更改div的內部html

回答

相關問題