Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nkdk의 세상

JS :: 리스트박스를 활용한 입력/삭제양식 본문

My Programing/HTML and JavaScript

JS :: 리스트박스를 활용한 입력/삭제양식

nkdk 2008. 6. 16. 10:13

  • Option()
    select태그의 항목을 처리합니다.

|형식| 이름 = new Option(문자열, value, 초기선택유무, 선택유무);

[문자열]은 select태그항목에 나타날 문자열이고 [value]는 항목을 선택했을 때 반환하는 값입니다.
[초기선택유무]는 항목을 초기에 선택된 상태로 만들지의 여부를 True나 False값으로 설정하고 [선택]은 생성할 항목을 선택되게 할지의 유무를 True, False값으로 설정합니다.
[문자열]은 생략할 수 없으나, [value], [초기선택유무], [선택유무]는 생략할 수 있습니다.

  • While문
    while문은 [조건식]이 만족하는 동안 [문장]을 수행합니다. [조건식]을 만족하지 않으면 한번도 수행하지 않을 수 있습니다. 다음의 [사용예]는 1에서 10까지 합을 구하는 소스입니다.

|형식|
  while(조건식) {
   문장;
     .
  }

|예제|
  var i=0, mytot=0;
  while(i<10) {
   i++;
   mytot = mytot + i;
  }
  document.write(mytot);

<html>
<script language="JavaScript">
<!--
function item_add() {  // 신규항목을 추가합니다.
var mytxt = frm1.item_name.value;  // 입력란에 기입한 텍스트
var item_index = frm1.mysel.options.length;  // 현 항목수&신규항목에 부여할 인덱스
var add_item = new Option(mytxt);  // 신규항목을 작성, 입력한 텍스트정보를 부여

frm1.mysel.options[item_index] = add_item;  // 신규항목을 출력
}

function item_delete() {  // 항목을 삭제합니다.
var mylen = frm1.mysel.options.length;  // 현 항목수
var i=0;

if(frm1.mysel.options.selectedIndex == -1) {  // 선택한 항목이 없으면 -1을 반환
  alert("선택을 하지 않으면 삭제할 수 없습니다.");
  return;
}

while(i<mylen) {  // 0번항목부터 현재 작성되어 있는 항목까지
  if(frm1.mysel.options[i].selected) {  // 해당항목에 선택되어 있으면
   frm1.mysel.options[i] = null;  //  해당값을 null값으로 설정합니다. (항목삭제)
   break;
  }

i++;  // 계속 검색합니다.
}
}

function item_select() {  // 선택된 항목을 확인합니다.
var mylen = frm1.mysel.options.length;

if(frm1.mysel.options.selectedIndex == -1) {
  alert("선택한 항목이 없습니다.");
  return;
  }

for(var i=0; i<mylen; i++) {
  if(frm1.mysel.options[i].selected) {
   alert("\""+frm1.mysel.options[i].text+"\""+" 을/를 선택하였습니다.");
    break;
  }
}
}

// -->
</script>
<body>

<form name="frm1">
* 입력 : <input type="text" name="item_name" size=20 maxlength=20>
<input type="button" name="add_item" value="추가" onclick="item_add()">
<hr width=250 align="left">
<select name="mysel" size=5></select>

<hr width=250 align="left">
<input type="button" name="del_item" value="삭제" onclick="item_delete()">
<input type="button" name="sel_item" value="선택한 항목" onclick="item_select()">
</form>

</body>
</html>

'My Programing/HTML and JavaScript' Related Articles more