Here you go: it's not a very nice script and could be made far more intelligent but I'm not a programmer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
<script language="javascript">
function hideTable()
{
document.getElementById('tbl1').style.display = 'none';
document.getElementById('tbl2').style.display = 'none';
document.getElementById('tbl3').style.display = 'none';
}
function showTable(obj)
{
obj.style.display = 'block';
}
function SwapTable ()
{
var list=document.forms[0].selTable;
a=list.options[list.selectedIndex].value;
if (a == 'tbl1' ) {
showTable(document.getElementById('tbl1'));
document.getElementById('tbl2').style.display = 'none';
document.getElementById('tbl3').style.display = 'none';
} else
if (a == 'tbl2' ) {
showTable(document.getElementById('tbl2'));
document.getElementById('tbl1').style.display = 'none';
document.getElementById('tbl3').style.display = 'none';
} else
if (a == 'tbl3' ) {
showTable(document.getElementById('tbl3'));
document.getElementById('tbl2').style.display = 'none';
document.getElementById('tbl1').style.display = 'none';
};
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body onload="hideTable()">
<form name="form1" method="post" action="">
<p>
Show table:
<select name="selTable" id="selTable" onchange="SwapTable()">
<option value="tbl1">A</option>
<option value="tbl2">B</option>
<option value="tbl3">C</option>
</select>
</p>
<table width="200" border="0" id="tbl1">
<tr>
<td>Table</td>
<td>A</td>
</tr>
</table>
<table width="200" border="0" id="tbl2">
<tr>
<td>Table</td>
<td>B</td>
</tr>
</table>
<table width="200" border="0" id="tbl3">
<tr>
<td>Table</td>
<td>C</td>
</tr>
</table>
<p> </p>
</form>
</body>
</html>