Question

好的，所以我使用仅仅是测试的按钮成功完成了我的目标。我的真正目标是根据使用下拉菜单选择的选项动态更改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>

所以上面的例子似乎做得很好，但这是因为它使用了两个函数，每个菜单时间一个。

所以这就是我目前所拥有的，也是我需要帮助的地方：

<!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 2</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;
}
#contentarea {
display: block;
width: 50%;
height: 300px;
border: 1px solid blue;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
</head>
<body>
</style>
<script type="text/javascript">
function changeContent()
{
var newContent = document.getElementById('selection');

var ContentInfo = newContent.selectedIndex;
newContent.value = newContent.options[ContentInfo].id;

document.getElementById('content').innerHTML = newContent;
}
</script>
<div id="content"></div> 
<p>
<select id="selection" onchange="JavaScript:changeContent()">
<option value="" id="" selected="selected">Select a website to load in the DIV..</option>
<option value="Page1" id="Page1.html">Page1</option>
<option value="Page2" id="Page2.html">Page2</option>
<option value="Page3" id="Page3.html">Page3</option>
<option value="Page4" id="Page4.html">Page4</option>
</select>
</p>
<p>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
var PageList = document.getElementById('Pages');
var displayPage = document.getElementById('contentarea');

var NewPage = PageList.selectedIndex;
displayPage.value = PageList.options[NewPage].id;
document.getElementById('contentarea').innerHTML = displayPage;
}
//-->
</script>
<select id="Pages" onchange="showSelected()";>
<option selected="selected" value="" id="">Select a website to load in the DIV..</option>
<option value="" id="Page1.html">Page 1</option>
<option value="" id="Page2.html">Page 2</option>
<option value="" id="Page3.html">Page 3</option>
<option value="" id="Page4.html">Page 4</option>
</select>
</p>
<div id="contentarea"></div>
</body>
</html>

首先要指出的是，我尝试用两种不同的方法编写脚本，两者都呈现出自己独特的错误。我不知道哪一个更接近正确答案，所以我在我的问题中提出这两个问题。顶部DIV窗口显示[object HTMLSelectElement]，下拉菜单中的项目消失。底部DIV窗口显示[object HTMLDivElement]，但下拉菜单似乎没有受到伤害。

要指出的第二件事是我是一个完整的javascript newb。（如果你还没有注意到）

要指出的第三点是，我已经意识到只需在每个<iframe>的ID部分输入<option>标记就行不通，即使这样做，也不会也非常实用。在脚本中我想添加如下内容：

<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
var PageList = document.getElementById('Pages');
var displayPage = document.getElementById('contentarea');

var NewPage = PageList.selectedIndex;
displayPage.value = PageList.options[NewPage].id;
document.getElementById('contentarea').innerHTML = displayPage;

innerHTML = '<iframe src="+ displayPage +" width="100%" height="100%" frameborder="no"></iframe>';

}
//-->
</script>

......或类似的东西。再一次......

-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 ;)

非常感谢您提供任何帮助。

Answer 1

一种方法是将添加iframe字符串的原始代码与从select获取值的新代码组合，并动态设置字符串。请注意，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>

请注意，我已将页面名称放在选项“value”中，而不是id中。

编辑：记得你特别不想出于某种原因使用value。我发布的内容与id的内容相同。或者你可以从标记中提取数据，并将其放入代码中，如下所示：

<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>

使用onChange根据下拉菜单选择在DIV中加载innerHTML

1 个答案: