根据选定的下拉选项更改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

回答

相关问题