select_test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <title>Select Test</title>
    <script type="text/javascript">
// <[!CDATA[

function AddName() {
    var name = document.getElementById("txtNewName").value;
    if (name=="") { return; }
    var node = document.createElement("option");
    var text = document.createTextNode(name);
    node.setAttribute("value", name);
    node.appendChild(text);
    document.getElementById("ddNames").appendChild(node);
    document.getElementById("txtNewName").value = "";
}

function SetName() {
    var selected = document.getElementById("ddNames").selectedIndex;
    var thelist = document.getElementById("ddNames").options;
    if (selected < 1) { return; }
    document.getElementById("hidName").value = thelist[selected].value;
    document.getElementById("ddNames").selectedIndex = 0;
}

function ShowName() {
    var name = document.getElementById("hidName").value;
    alert(name);
}

// ]]>
    </script>
</head>
<body>
    <p>
        Add a name:
        <input type="text" id="txtNewName" value="">
        <input type="button" id="btnAddName" value="Add Name" onclick="AddName()">
    </p>
    <hr>
    <select id="ddNames">
        <option value="">Choose a name...</option>
    </select>
    <input type="button" id="btnSetName" value="Set Name" onclick="SetName()">
    <hr>
    <input type="hidden" id="hidName" value="">
    <input type="button" id="btnShowName" value="Show Name" onclick="ShowName()">
    <script type="text/javascript">
// <[!CDATA[

// ]]>
    </script>
</body>
</html>