How about something like this?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Quick example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
}
</style>
<script type="text/javascript">
var arr=new Array()
arr[1]="hi";
arr[2]="there";
arr[3]="haha";
function fill(sel,p) {
var selBox=document.getElementById(sel);
var textBox=document.getElementById(p);
selBox.onchange=function() {
while(textBox.childNodes[0]) {
textBox.removeChild(textBox.childNodes[0]);
}
if(arr[this.value]) {
var text=arr[this.value];
var op=document.createElement('option');
var textN=document.createTextNode(text);
op.appendChild(textN);
textBox.appendChild(op);
}
}
}
window.onload=function() {fill('numbers','text')}
</script>
</head>
<body>
<p><select id="numbers">
<option>- select one --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></p>
<p id="text"></p>
</body>
</html>
(I know it's not the same as what you said, but it's very similar...)