[HTML/JavaScript ]select box option 추가 삭제 예제
DEVELOPMENT/Javascript2009. 8. 11. 13:56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript" type="text/javascript">
<!--
var count1 = 0;
var count2 = 0;
/**
* 선택된 option의 이전에 새로운 option 을 추가한다.
**/
function insertOptionBefore(num){
var elSel = document.getElementById('selectX');
if(elSel.selectedIndex >= 0) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];
try {
elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}catch(ex){
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}
* 선택된 option의 이전에 새로운 option 을 추가한다.
**/
function insertOptionBefore(num){
var elSel = document.getElementById('selectX');
if(elSel.selectedIndex >= 0) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];
try {
elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}catch(ex){
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}
/**
* 선택된 옵션을 삭제한다.
**/
function removeOptionSelected(){
var elSel = document.getElementById('selectX');
var i;
for (i = elSel.length - 1; i>=0; i--) {
if (elSel.options[i].selected) {
elSel.remove(i);
}
}
}
* 선택된 옵션을 삭제한다.
**/
function removeOptionSelected(){
var elSel = document.getElementById('selectX');
var i;
for (i = elSel.length - 1; i>=0; i--) {
if (elSel.options[i].selected) {
elSel.remove(i);
}
}
}
/**
* 마지막에 새로운 option을 추가한다.
**/
* 마지막에 새로운 option을 추가한다.
**/
function appendOptionLast(num){
var elOptNew = document.createElement('option');
elOptNew.text = 'Append' + num;
elOptNew.value = 'append' + num;
var elSel = document.getElementById('selectX');
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}catch(ex) {
elSel.add(elOptNew); // IE only
}
}
/**
* 마지막 옵션을 삭제한다.
**/
function removeOptionLast(){
var elSel = document.getElementById('selectX');
if (elSel.length > 0){
elSel.remove(elSel.length - 1);
}
}
//-->
</script>
</HEAD>
var elOptNew = document.createElement('option');
elOptNew.text = 'Append' + num;
elOptNew.value = 'append' + num;
var elSel = document.getElementById('selectX');
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}catch(ex) {
elSel.add(elOptNew); // IE only
}
}
/**
* 마지막 옵션을 삭제한다.
**/
function removeOptionLast(){
var elSel = document.getElementById('selectX');
if (elSel.length > 0){
elSel.remove(elSel.length - 1);
}
}
//-->
</script>
</HEAD>
<BODY>
<form>
<input type="button" value="이전 추가" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
<input type="button" value="삭제" onclick="removeOptionSelected();" />Remove Selected<br />
<select id="selectX" size="10">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="마지막 추가" onclick="appendOptionLast(count2++);" />Append Last<br />
<input type="button" value="마지막 삭제" onclick="removeOptionLast();" />Remove Last
</form>
</BODY>
</HTML>
<form>
<input type="button" value="이전 추가" onclick="insertOptionBefore(count1++);" />Insert Before Selected<br />
<input type="button" value="삭제" onclick="removeOptionSelected();" />Remove Selected<br />
<select id="selectX" size="10">
<option value="original1" selected="selected">Orig1</option>
<option value="original2">Orig2</option>
</select>
<br />
<input type="button" value="마지막 추가" onclick="appendOptionLast(count2++);" />Append Last<br />
<input type="button" value="마지막 삭제" onclick="removeOptionLast();" />Remove Last
</form>
</BODY>
</HTML>
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| [prototype.js] Element 생성하기 (0) | 2009.09.09 |
|---|---|
| [HTML/JavaScript] Select list move options (0) | 2009.08.11 |
| HTML 특수문자코드표 (0) | 2009.07.22 |
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
| [IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응 (0) | 2009.04.13 |
