Creating a combo box with HTML and JavaScript

I have to make a combo box in an html form & receive its selected value in a php script. I have a piece of code from the Internet. It has text box & dropdown list side by side. After the user enters a value in text box, the value goes into a list that the user has to select again.

I need to have the text box on top and the list below it. If I use a <p> tag to break the line for the list, the code stops working. I want the options entered by the user to become a permanent part of the options and selected as the default in the list once the user enters a value in the text box. One more question in connection with this is, as I have to put this in a form on an HTML page, where would I put the JavaScript script, in the head or the body?

Here is my piece of code:

<html>

<style>

SELECT {
top: expression(this.previousSibling.offsetTop);
left: expression(this.previousSibling.offsetLeft);
width: expression(this.previousSibling.offsetWidth);
position: absolute;
clip: expression("rect(auto auto auto " + (this.previousSibling.offsetWidth - 20) + "px)");
overflow: hidden;
}

</style>

<script language="javascript">

var oNewOption = null;

function AddListItem(oInput) {

var oSelect = oInput.nextSibling;

if (oNewOption == null) {
oNewOption = document.createElement("OPTION");
oSelect.options.add(oNewOption);
}

oNewOption.text = oInput.value;
oNewOption.value = oInput.value;

}
</script>
<body>

<form id='Form1'>
<input id='txtInput' type='text' onkeyup="AddListItem(this)"/><select>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>

ansaurus

tags:

views:

answers:

Creating a combo box with HTML and JavaScript

related questions