使用 onChange 根據下拉菜單選擇在 DIV 中加載 innerHTML

Question

好的，所以我已經使用按鈕成功完成了我的目標，這只是一個測試。 我的真正目標是根據使用下拉菜單選擇的選項動態更改 DIV 中的 innerHTML。 然而，問題是必須使用每個菜單項的唯一 ID 來完成。 它不能使用每個菜單項的值工作，因為該值正在被一個完全不同的腳本使用，該腳本正在工作（目前）。

我有一個使用按鈕和下拉菜單的工作示例，但下拉菜單僅在此示例中有效，因為我為每個列表選項使用單獨的 function。 當它上線時，我將有兩個下拉菜單，其中包含幾十個項目，因此為每個項目編寫 function 將非常耗時，而且對於生產來說不是很實用。

這是工作示例：

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

首先要指出的是，我嘗試用 2 種不同的方法編寫腳本，這兩種方法都出現了自己獨特的錯誤。 我不知道哪一個更接近正確答案，所以我在我的問題中都提出了這兩個問題。 頂部 DIV window 顯示[object HTMLSelectElement]並且下拉菜單中的項目消失。 底部 DIV window 顯示[object HTMLDivElement] ，但下拉菜單似乎安然無恙。

第二件事要指出的是，我是一個完整的 javascript 新手。 （如果你還沒有注意到）

第三點要指出的是，我已經意識到，僅僅通過在每個<option>的 ID 部分中輸入<iframe>標簽是行不通的，即使這樣做了，這也不是很實用。 在腳本中，我想添加如下內容：

<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獲取值的新代碼結合起來，並動態設置字符串。 請注意，您的選擇的 onchange 可以將對 select 的引用傳遞給 function，以使您不必使用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 個解決方案

解決方案1
1 已采納 2011-06-30 00:49:08

使用 onChange 根據下拉菜單選擇在 DIV 中加載 innerHTML

問題描述

1 個解決方案

解決方案1 1 已采納 2011-06-30 00:49:08

解決方案1
1 已采納 2011-06-30 00:49:08