Laden innerHTML innen DIV basierend auf den dropdown-Menü-Auswahl mit onChange
Okay, also habe ich Sie erfolgreich abgeschlossen, mein Ziel über die Tasten, das war nur ein test. Mein eigentliches Ziel ist, dynamisch ändern Sie die innerHTML in ein DIV, basierend auf der ausgewählten option über das drop-down-Menü. Der Fang ist jedoch, dass es getan werden MUSS mit den einzelnen Menüpunkten eindeutige ID. Es kann NICHT funktionieren mit dem Wert jedes Menü-Element, als Wert wird genutzt um ein völlig anderes script, das funktioniert (im moment).
Habe ich ein Beispiel mit Schaltflächen sowie eine drop-down-Menü, aber das drop-down-Menü funktioniert nur in diesem Beispiel, weil ich bin mit separater Funktion für jedes die option Liste. Wenn das live geht, werde ich zwei drop-down-Menüs enthalten mehrere Dutzend Elemente, so schreiben einer Funktion für jedes Element, das wäre zu zeitaufwändig und nicht sehr praktisch für die Produktion.
Hier ist das Beispiel:
<!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>Also das obige Beispiel scheint für den job gut, aber das ist, weil Ihr die Verwendung von zwei Funktionen, eine für jedes Menü Zeit.
So, hier ist was ich habe, so weit und ist das, was ich benötige Hilfe:
<!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>Erste, was darauf hinweisen, ist, dass ich habe versucht, das Skript zu schreiben in 2 verschiedene Methoden an, beide stellen Ihre eigenen einzigartigen Fehler. Ich weiß nicht, was man ist näher an der richtigen Antwort oder nicht, also bin ich zu präsentieren, sowohl in meiner Frage. Das top-DIV Fenster zeigt [object HTMLSelectElement] und die Elemente in der drop-down-Menü verschwinden. Der untere DIV-Fenster zeigt [object HTMLDivElement], aber der drop-down-Menü scheint unversehrt.
Zweite Sache, die darauf hinweisen, dass ich bin ein absoluter javascript-Anfänger. (im Fall, dass Sie nicht schon bemerkt)
Dritte Sache, die darauf hinweisen, dass ich bereits erkennen, dass dies nicht zur Arbeit zu gehen, indem Sie einfach die Eingabe der <iframe> - tags in der ID-Abschnitt jeder <option> und selbst wenn es das täte, wäre das nicht sehr praktisch sein, entweder. Im Skript möchte ich hinzufügen, sowas wie:
<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>...oder so ähnlich. Also nochmal...
-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 ;)Vielen Dank im Voraus für jede Hilfe, die Sie anbieten können.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einen Weg, es zu tun ist, um kombinieren Sie Ihre original-code Hinzugefügt
iframeals string, mit Ihrem neuen code ruft den Wert aus derselect, und setzen Sie den string dynamisch. Beachten Sie, dass Ihre select onchange können, übergeben Sie einen Verweis auf die wählen Sie, um die Funktion zu speichern, müssen Sie unter Verwendungdocument.getElementById()so etwas wie dieses:Beachten Sie, dass ich habe die Seite Namen in den Optionen'
valueAttribute statt inid.EDIT: gerade eingefallen, wie Sie insbesondere nicht verwenden möchten
valueaus irgendeinem Grund. Was ich gebucht habe, würde das gleiche mitid. Oder Sie ziehen konnte, dass die Daten aus dem markup und nur haben es im code so etwas wie dieses: