DOM 이용 select box 옵션추가삭제
<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>
#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>
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.