title: Load innerHTML inside DIV based on dropdown menu selection using onChange
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>Here is the working example:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;sandbox 1&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;style type="text/css"&gt;
  #content {
  display: block;
  width: 50%;
  height: 300px;
  border: 1px solid blue;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script type="text/javascript"&gt;
  
  function innerHTML1()
  {
  document.getElementById('content').innerHTML = '&lt;iframe src="http://www.google.ca" width="100%" height="100%" frameborder="no"&gt;&lt;/iframe&gt;';
  }
  
  function innerHTML2()
  {
  document.getElementById('content').innerHTML = '&lt;iframe src="http://www.msn.ca" width="100%" height="100%" frameborder="no"&gt;&lt;/iframe&gt;';
  }
  
  &lt;/script&gt;
  
  &lt;div id="content"&gt;&lt;/div&gt;&lt;br /&gt;
  &lt;input type="button" onclick="innerHTML1()" value="open Google" /&gt;
  &lt;p&gt;
  &lt;input type="button" onclick="innerHTML2()" value="open MSN" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;select&gt;
  &lt;option value=""&gt;select an option...&lt;/option&gt;
  &lt;option value="" onClick="innerHTML1()"&gt;open Google&lt;/option&gt;
  &lt;option value="" onClick="innerHTML2()"&gt;open MSN&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So the above example seems to do the job fine, but that's because its using two functions, one for each menu time.</p>
  
  <p>So here is what I have so far and is what I need help with: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;sandbox 2&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;style type="text/css"&gt;
  #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;
  }
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  function changeContent()
  {
  var newContent = document.getElementById('selection');
  
  var ContentInfo = newContent.selectedIndex;
  newContent.value = newContent.options[ContentInfo].id;
  
  document.getElementById('content').innerHTML = newContent;
  }
  &lt;/script&gt;
  &lt;div id="content"&gt;&lt;/div&gt; 
  &lt;p&gt;
  &lt;select id="selection" onchange="JavaScript:changeContent()"&gt;
  &lt;option value="" id="" selected="selected"&gt;Select a website to load in the DIV..&lt;/option&gt;
  &lt;option value="Page1" id="Page1.html"&gt;Page1&lt;/option&gt;
  &lt;option value="Page2" id="Page2.html"&gt;Page2&lt;/option&gt;
  &lt;option value="Page3" id="Page3.html"&gt;Page3&lt;/option&gt;
  &lt;option value="Page4" id="Page4.html"&gt;Page4&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;script language="JavaScript" type="text/javascript"&gt;
  &lt;!--
  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;
  }
  //--&gt;
  &lt;/script&gt;
  &lt;select id="Pages" onchange="showSelected()";&gt;
  &lt;option selected="selected" value="" id=""&gt;Select a website to load in the DIV..&lt;/option&gt;
  &lt;option value="" id="Page1.html"&gt;Page 1&lt;/option&gt;
  &lt;option value="" id="Page2.html"&gt;Page 2&lt;/option&gt;
  &lt;option value="" id="Page3.html"&gt;Page 3&lt;/option&gt;
  &lt;option value="" id="Page4.html"&gt;Page 4&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  &lt;div id="contentarea"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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 <code>[object HTMLSelectElement]</code> and the items in the drop down menu disappear. The bottom DIV window shows <code>[object HTMLDivElement]</code>, but the drop down menu seems unharmed.</p>
  
  <p>Second thing to point out is that I'm a complete javascript newb. (in case you haven't noticed already)</p>
  
  <p>Third thing to point out is that I already realize that this is not going to work by simply entering the <code>&lt;iframe&gt;</code> tags in the ID section of every <code>&lt;option&gt;</code> and even if it did, that wouldn't be very practical either. In the script I want to add something like:</p>
  
  <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt;
  &lt;!--
  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 = '&lt;iframe src="+ displayPage +" width="100%" height="100%" frameborder="no"&gt;&lt;/iframe&gt;';
  
  }
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>...or something like that. So again...</p>
  
  <pre><code>-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 `&lt;option&gt;` cannot be used for this solution, as value is being used for another script. The script must work using the id of each `&lt;option&gt;`
  -Writing a seperate function for every `&lt;option&gt;` works, but isn't very practical.
  -I fail at javascript ;)
  </code></pre>
  
  <p>Thanks very much in advance for any help you can offer.</p>