使用onChange在基於下拉菜單選擇的DIV中加載innerHTML

好的，所以我已經成功地完成了使用僅僅是測試的按鈕的目標。我的真正目標是根據使用下拉菜單選擇的選項動態更改DIV內的innerHTML。但是，我們必須使用每個菜單項唯一的ID來完成。它無法使用每個菜單項的值，因爲該值正在被一個完全不同的腳本使用（目前正在運行）。使用onChange在基於下拉菜單選擇的DIV中加載innerHTML

我有一個使用按鈕以及下拉菜單的工作示例，但下拉菜單僅適用於此示例，因爲我爲每個列表選項使用了單獨的函數。當這個過程中，我會有兩個下拉菜單，其中將包含幾十個項目，因此爲每個項目編寫一個函數會很耗時，並且不適合生產。

這裏是工作示例：

<!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窗口顯示[object HTMLSelectElement]，下拉菜單中的項目消失。底部的DIV窗口顯示[object HTMLDivElement]，但下拉菜單似乎沒有受到傷害。

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

指出的第三件事是，我已經意識到，這是不會簡單地在每一個<option>的ID部分進入標籤即使它沒有工作，那也不是很實際。在腳本中，我想添加如下內容：

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

非常感謝您提供的任何幫助。

來源

2011-06-29 abracassabra

一種方式來做到這一點是將所加入的iframe作爲一個字符串的原代碼，用新的代碼，獲取從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>

來源

2011-06-30 00:49:08 nnnnnn

完美！將數據從標記中提取出來並輸入到代碼中正是我所需要的，這很好用！非常感謝你=） – abracassabra

@ Lord Tubington - 很酷，很樂意幫忙。隨意接受我的回答（點擊您應該在答案旁邊看到的複選框，它會變成綠色;我必須獲得這些回覆點，並且如果他們看到您接受答案，人們更有可能在未來的問題上爲您提供幫助...） – nnnnnn

使用onChange在基於下拉菜單選擇的DIV中加載innerHTML

回答

相關問題