selectbox 에 항목을 추가 삭제 할때 자동으로 정렬을 해주는 방법이다.
만들때는 생각을 안했는데 해 놓고 보니 MVC or MVP 패턴과 닮았다.
Smalltalk의 영향인가...
항목(item)에 대한 Model 객체(Array)가 있고
Model에 변화가 생기면 View를 바꾼다.
function refreshList(){
var listObj = document.getElementById('list');
clearList();
keyword_list.sort();
var arr_text = '';
for(var i=0; i<keyword_list.length; i++){
var newOpt = document.createElement('OPTION');
newOpt.value = keyword_list[i];
newOpt.text = keyword_list[i];
arr_text += '[' + i + '] => ' + keyword_list[i] + '<br />';
listObj.add(newOpt);
}
document.getElementById('arrayDesc').innerHTML = arr_text;
}
전체 소스를 보자....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="JavaScript">
<!--
var keyword_list = new Array();
function itemAdd(){
var keywordObj = document.getElementById('keyword');
if(keywordObj.value == ''){
keywordObj.focus();
return false;
}
keyword_list.push(keywordObj.value);
keywordObj.value = '';
keywordObj.focus();
refreshList();
}
function refreshList(){
var listObj = document.getElementById('list');
clearList();
keyword_list.sort();
var arr_text = '';
for(var i=0; i<keyword_list.length; i++){
var newOpt = document.createElement('OPTION');
newOpt.value = keyword_list[i];
newOpt.text = keyword_list[i];
arr_text += '[' + i + '] => ' + keyword_list[i] + '<br />';
listObj.add(newOpt);
}
document.getElementById(arrayStat).innerHTML = arr_text;
}
function itemRemove(){
var listObj = document.getElementById('list');
if(listObj.selectedIndex < 0){
return false;
}
keyword_list.splice(listObj.selectedIndex,1);
refreshList();
}
function clearList(){
var listObj = document.getElementById('list');
while(listObj.length > 0){
listObj.remove(0);
}
}
//-->
</script>
</head>
<body>
<input type="text" id="keyword" value="" />
<input type="button" value="추가" onClick=" itemAdd();" />
<hr />
<div>
<div style="width: width: 120px; padding: 0; float: left;">
<select id="list" size="10" style="width: 100px;">
</select><input type="button" value="삭제" onClick=" itemRemove();" />
</div>
<div id="arrayStat" style="border: solid 1px #D9D9D9; width: 120px;"></div>
</div>
</body>
</html>
* 오른쪽에 보이는 레이어(arrayStat)는 Model의 상태를 나타내는 역할을 한다.
아무래도 배열을 쓰고 Model이 바뀔때마다 View를 초기화 하고 다시 뿌려주니
많은 데이터를 처리할때는 속도가 걸림돌이 될 것 같다.
'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글
| CSS Box Model (0) | 2006.11.30 |
|---|---|
| Ajax + Drag&Drop 활용 사이트 (0) | 2006.11.10 |
| 레이어의 높이 고정시키기 - overflow (0) | 2006.10.19 |
| 이벤트 추가 - addEventListener/attachEvent (2) | 2006.10.09 |
| xmlhttprequest로 값 전송시 한글 인코딩/디코딩 (0) | 2006.07.18 |
