<style>
#list {width:140; height:100px;}
</style>

<script type="text/javascript">
<!--
    var header = {
        input : '',
        sel : '',
        
        init: function()
        {
            this.input = document.getElementById('input_head');
            this.sel = document.getElementById('list');
            var addbtn = document.getElementById('addbtn');
            var delbtn = document.getElementById('delbtn');
            addbtn.onclick = function() {header.addHeader();}
            delbtn.onclick = function() { header.delHeader(); }
            
        },
        addHeader: function()
        {
            var newOpt = document.createElement('option');
            newOpt.text = this.input.value;
            newOpt.value = this.input.value;
            this.sel.add(newOpt);
            this.input.value= '';
        },
        
        delHeader: function()
        {
            this.sel.remove(this.sel.selectedIndex);
        }
    };
//-->
</script>
<div><input type="text" size="20" id="input_head"><button id="addbtn">추가</button></div>
<div><select id="list" size="10"></select></div><button id="delbtn">삭제</button>
<script type="text/javascript">    header.init();</script>