javascript 使用 onChange 基于下拉菜单选择在 DIV 中加载 innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6528319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load innerHTML inside DIV based on dropdown menu selection using onChange
提问by cassidymack
Okay, so I've successfully completed my goal using buttons which was merely a test. My real goal is to dynamically change the innerHTML within a DIV, based on the option selected using the drop down menu. The catch however, is that it MUST be done using each menu items unique ID. It CANNOT work using the value of each menu item, as the value is being utilized by an entirely different script, which is working (for the moment).
好的，所以我已经使用按钮成功完成了我的目标，这只是一个测试。我的真正目标是根据使用下拉菜单选择的选项动态更改 DIV 中的 innerHTML。然而，问题在于它必须使用每个菜单项的唯一 ID 来完成。它不能使用每个菜单项的值工作，因为该值正在被一个完全不同的脚本使用，该脚本正在工作（目前）。
I have a working example using buttons as well as a drop down menu, but the drop down menu only works in this example because I am using a separate function for each list option. When this goes live, I'll have two drop down menus that will contain several dozen items, so writing a function for every item would be time consuming and not very practical for production.
我有一个使用按钮和下拉菜单的工作示例，但下拉菜单仅适用于本示例，因为我为每个列表选项使用了单独的函数。当它上线时，我将有两个包含几十个项目的下拉菜单，所以为每个项目编写一个函数会很耗时，而且对生产来说不太实用。
Here is the working example:
这是工作示例：
<!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>
So the above example seems to do the job fine, but that's because its using two functions, one for each menu time.
所以上面的例子似乎做得很好，但那是因为它使用了两个功能，每个菜单时间一个。
So here is what I have so far and is what I need help with:
所以这是我到目前为止所拥有的，也是我需要帮助的：
<!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>
First thing to point out is that I tried writing the script in 2 different methods, both presenting their own unique error. I don't know which one is closer to the correct answer or not so I'm presenting both in my question. The top DIV window shows [object HTMLSelectElement]and the items in the drop down menu disappear. The bottom DIV window shows [object HTMLDivElement], but the drop down menu seems unharmed.
首先要指出的是，我尝试用 2 种不同的方法编写脚本，这两种方法都有自己独特的错误。我不知道哪一个更接近正确答案，所以我在我的问题中都提出了。顶部 DIV 窗口显示[object HTMLSelectElement]，下拉菜单中的项目消失。底部的 DIV 窗口显示[object HTMLDivElement]，但下拉菜单似乎没有受到损害。
Second thing to point out is that I'm a complete javascript newb. (in case you haven't noticed already)
第二件事要指出的是，我是一个完整的 javascript 新手。（如果你还没有注意到）
Third thing to point out is that I already realize that this is not going to work by simply entering the <iframe>tags in the ID section of every <option>and even if it did, that wouldn't be very practical either. In the script I want to add something like:
要指出的第三件事是，我已经意识到这不会通过简单地<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>
...or something like that. So again...
...或类似的东西。所以又...
-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 ;)
Thanks very much in advance for any help you can offer.
非常感谢您提供的任何帮助。
回答by nnnnnn
One way to do it is to combine your original code that added the iframeas a string, with your new code that gets the value from the select, and set the string dynamically. Note that your select's onchange can pass a reference to the select to the function, to save you having to use document.getElementById(), something like this:
一种方法是将添加iframe为字符串的原始代码与从 获取值的新代码结合起来select，并动态设置字符串。请注意，您选择的 onchange 可以将选择的引用传递给函数，以节省您必须使用的操作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>
Note that I've put the page names in the options' valueattributes rather than in id.
请注意，我已将页面名称放在选项的value属性中，而不是放在id.
EDIT: just remembered you specifically didn't want to use valuefor some reason. What I've posted would work the same with id. Or you could pull that data out of the markup and just have it in code, something like this:
编辑：只是记得你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>
