Home|Sitemap|Contact

How can you change page contents when an item is selected from a drop down list?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="author" content="Roderick Divilbiss">
  <meta name="copyright" content="? 2005 Roderick Divilbiss">
  <title>Country Info</title>
  <script type="text/javascript">
  <!--
  function changeCountry(oSel) {
    document.getElementById('details').src = oSel[oSel.selectedIndex].value+'.htm';
  }
  //-->
  </script>
  <style type="text/css">
  <!--
  #dSel { position: absolute; left: 10; top: 10; width: 150; height: 35; right:160; bottom:45 }
  #dDet { 
    float: right;
    margin-left:200px;
    width: 400;
    border: 1px solid #000000;
    padding: 10px;
    height:100%;
    background-color:#D7D8D9;
  }
  -->
  </style>
</head>
<body>
<p>Select an item from the drop down list and the contents of the iframe will change.<br>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="600" id="table1">
  <tr>
    <td width="100" valign="top">
      <select name="country" onchange="changeCountry(this);">
        <option selected value="usa">USA</option>
        <option value="england">England</option>
        <option value="mexico">Mexico</option>
      </select>
    </td>
    <td width="400" valign="top"><iframe id="details" width="380" src="USA.htm"></iframe></td>
  </tr>
</table>
</div>
</body>

</html>