title: Using Javascript to load an html page inside an iframe
body: <p>I am trying to get each option to load a different page in frame</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function selectCountry()
  {
  var mylist=document.getElementById("country");
  document.getElementById("frame").src=mylist.options[mylist.selectedIndex].html;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;form action=""&gt;
  &lt;select id = "country" onchange="selectCountry()"&gt;
  &lt;option value="america"&gt;America&lt;/option&gt;
  &lt;option value="austria"&gt;Austria&lt;/option&gt;
  &lt;option value="belgium"&gt;Belgium&lt;/option&gt;
  &lt;option value="bosnia"&gt;Bosnia and Herzegovina&lt;/option&gt;
  &lt;option value="croatia"&gt;Croatia&lt;/option&gt;
  &lt;option value="estonia"&gt;Estonia&lt;/option&gt;
  &lt;option value="france"&gt;France&lt;/option&gt;
  &lt;option value="germany"&gt;Germany&lt;/option&gt;
  &lt;option value="greece"&gt;Greece&lt;/option&gt;
  &lt;option value="hungary"&gt;Hungary&lt;/option&gt;
  &lt;option value="italy"&gt;Italy&lt;/option&gt;
  &lt;option value="netherlands"&gt;Netherlands&lt;/option&gt;
  &lt;option value="russia"&gt;Russia&lt;/option&gt;
  &lt;option value="serbia"&gt;Serbia&lt;/option&gt;
  &lt;option value="sweden"&gt;Sweden&lt;/option&gt;
  &lt;option value="switzerland"&gt;Switzerland&lt;/option&gt;
  &lt;option value="uk"&gt;UK&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  &lt;iframe id = "frame"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but the page does not load in the iframe, apache gives an object not found message despite the page being in the same folder as index.html above. I have tried changing the line:</p>
  
  <pre><code>document.getElementById("frame").src=mylist.options[mylist.selectedIndex].html;
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>document.getElementById("frame").src=mylist.options[mylist.selectedIndex] + ".html";
  </code></pre>
  
  <p>but no joy. plz help.</p>