Fatal编程技术网
  • javascript/
  • Javascript 使用onChange基于下拉菜单选择在DIV中加载innerHTML

Javascript 使用onChange基于下拉菜单选择在DIV中加载innerHTML

javascript dynamic html drop-down-menu

Javascript 使用onChange基于下拉菜单选择在DIV中加载innerHTML,javascript,dynamic,html,drop-down-menu,innerhtml,Javascript,Dynamic,Html,Drop Down Menu,Innerhtml,好的，我已经成功地完成了我的目标，使用的按钮只是一个测试。我真正的目标是根据使用下拉菜单选择的选项，动态更改DIV中的innerHTML。然而，关键是必须使用每个菜单项的唯一ID来完成。它不能使用每个菜单项的值，因为该值正由一个完全不同的脚本使用，该脚本正在工作（目前） 我有一个使用按钮和下拉菜单的工作示例，但是下拉菜单只在这个示例中工作，因为我对每个列表选项使用单独的函数。当它上线时，我将有两个下拉菜单，其中将包含几十个项目，因此为每个项目编写一个函数将非常耗时，对于生产来说并不实用 以下是工

好的，我已经成功地完成了我的目标，使用的按钮只是一个测试。我真正的目标是根据使用下拉菜单选择的选项，动态更改DIV中的innerHTML。然而，关键是必须使用每个菜单项的唯一ID来完成。它不能使用每个菜单项的值，因为该值正由一个完全不同的脚本使用，该脚本正在工作（目前）

我有一个使用按钮和下拉菜单的工作示例，但是下拉菜单只在这个示例中工作，因为我对每个列表选项使用单独的函数。当它上线时，我将有两个下拉菜单，其中将包含几十个项目，因此为每个项目编写一个函数将非常耗时，对于生产来说并不实用

以下是工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sandbox 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#content {
display: block;
width: 50%;
height: 300px;
border: 1px solid blue;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
</style>

</head>

<body>

<script type="text/javascript">

function innerHTML1()
{
document.getElementById('content').innerHTML = '<iframe src="http://www.google.ca" width="100%" height="100%" frameborder="no"></iframe>';
}

function innerHTML2()
{
document.getElementById('content').innerHTML = '<iframe src="http://www.msn.ca" width="100%" height="100%" frameborder="no"></iframe>';
}

</script>

<div id="content"></div><br />
<input type="button" onclick="innerHTML1()" value="open Google" />
<p>
<input type="button" onclick="innerHTML2()" value="open MSN" />
</p>
<p>
<select>
<option value="">select an option...</option>
<option value="" onClick="innerHTML1()">open Google</option>
<option value="" onClick="innerHTML2()">open MSN</option>
</select>
</p>


</body>
</html>
…或者类似的东西。所以再一次

-I'm loading an iFrame inside a DIV.
-The content of the DIV will change depending on what item in a dropdown menu is selected (must execute using onChange)
-The value of the `<option>` cannot be used for this solution, as value is being used for another script. The script must work using the id of each `<option>`
-Writing a seperate function for every `<option>` works, but isn't very practical.
-I fail at javascript ;)

-我正在DIV中加载iFrame。
-DIV的内容将根据下拉菜单中选择的项目而变化（必须使用onChange执行）
-“``的值不能用于此解决方案，因为该值正用于另一个脚本。脚本必须使用每个脚本的id工作``
-为每个``编写一个单独的函数是可行的，但不太实用。
-我在javascript方面失败；）
非常感谢您提供的任何帮助。

一种方法是将添加了
iframe
作为字符串的原始代码与从
选择中获取值的新代码结合起来，并动态设置字符串。请注意，select的onchange可以将对select的引用传递给函数，以避免您不得不使用
document.getElementById（）
，类似于：


<script>
function showSelected(sel) {
   srcLocation = sel.options(sel.selectedIndex).value;
   if (srcLocation != "") {
      document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
          '" width="100%" height="100%" frameborder="no"></iframe>'; 
   }
}
</script>

<select onchange="showSelected(this);">
   <option value="">select an option...</option>
   <option value="Page1.html">Page 1</option> 
   <option value="Page2.html">Page 2</option> 
   <option value="Page3.html">Page 3</option> 
</select>



<script>
function showSelected(sel) {
   locations = ["",
                "Page1.html",
                "Page2.html",
                //etc.
               ];

   srcLocation = locations[sel.selectedIndex];
   if (srcLocation != undefined && srcLocation != "") {
      document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
          '" width="100%" height="100%" frameborder="no"></iframe>'; 
   }
}
</script>



完美的从标记中提取数据并将其输入代码正是我所需要的，这非常有效！太谢谢你了。@Tubington勋爵-很好，很乐意帮忙。请随意接受我的答案（点击你应该在答案旁边看到的复选框，它将变为绿色；我必须获得这些代表分数，如果人们看到你接受答案，他们更有可能在未来的问题上帮助你……）

<script>
function showSelected(sel) {
   srcLocation = sel.options(sel.selectedIndex).value;
   if (srcLocation != "") {
      document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
          '" width="100%" height="100%" frameborder="no"></iframe>'; 
   }
}
</script>

<select onchange="showSelected(this);">
   <option value="">select an option...</option>
   <option value="Page1.html">Page 1</option> 
   <option value="Page2.html">Page 2</option> 
   <option value="Page3.html">Page 3</option> 
</select>



<script>
function showSelected(sel) {
   locations = ["",
                "Page1.html",
                "Page2.html",
                //etc.
               ];

   srcLocation = locations[sel.selectedIndex];
   if (srcLocation != undefined && srcLocation != "") {
      document.getElementById('content').innerHTML = '<iframe src="' + srcLocation +
          '" width="100%" height="100%" frameborder="no"></iframe>'; 
   }
}
</script>