javascript - Load innerHTML inside DIV based on dropdown menu selection using onChange

Okay, so I've successfully pleted 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).

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" ".dtd">
<html xmlns="">
<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="" width="100%" height="100%" frameborder="no"></iframe>';
}

function innerHTML2()
{
document.getElementById('content').innerHTML = '<iframe src="" 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" "    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">
<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.

Second thing to point out is that I'm a plete javascript newb. (in case you haven't noticed already)

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:

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

Here is the working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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>

Second thing to point out is that I'm a plete javascript newb. (in case you haven't noticed already)

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

Share Improve this question asked Jun 29, 2011 at 23:11 sixtwowaifu 7974 gold badges17 silver badges41 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

One way to do it is to bine your original code that added the iframe as 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:

<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' value attributes rather than in id.

EDIT: just remembered you specifically didn't want to use value for 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:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Load innerHTML inside DIV based on dropdown menu selection using onChange - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)