웹마당넷 |[SELECT BOX] SELECT 박스에 항목이 동적으로 추가,삭제됩니다.

Javascript Example

제 목

[SELECT BOX] SELECT 박스에 항목이 동적으로 추가,삭제됩니다.

작성자

운영자

등록일

20100210160137

조회수

35,927

체크박스(CHECK BOX)에 선택된 항목이 셀렉트 박스(SELECT BOX)에 동적으로 추가,삭제되는
소스로 아래 예제 소스에서 항목 삭제 부분을 추가한 것입니다. 항목을 삭제하기 위해서는 셀렉트
박스를 더블클릭하시면 됩니다.

IE와 FF에서 잘 동작합니다.

<html>
<head>
<title>웹마당넷</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script type="text/javascript">
<!--
function selectChkBox(frm) {

var sum = 0;
var count = frm.checkbox.length;
  for(var i=0; i < count; i++ ){
       if( frm.checkbox[i].checked == true ){
           addSelectBox(frm.checkbox[i].value,frm.checkbox[i].value,frm);
       }
  } 

}

// SELECT 박스의 항목을 추가하는 함수
function addSelectBox(text,value,frm)
{
  var isIE = false;
  
  //브라우저가 IE인지 체크한다
  if (navigator.appName == "Microsoft Internet Explorer")
      isIE = true;

  if( isIE )
   frm.selectBox.add(new Option(text,value)); 
  else 
   frm.selectBox.add(new Option(text,value),null,null,null); 

}

// SELECT 박스의 항목을 삭제하는 함수
function deleteSelectBox()
{
  var frm = document.form;
  frm.selectBox.options[frm.selectBox.selectedIndex] = null;
}

function dbClick()
{
  deleteSelectBox();
}

if (document.layers) { 
        document.captureEvents(Event.ONDBLCLICK); 
} 

document.ondblclick=dbClick; 

//-->
</script>
</head>
<body>
<form name="form">
<input name="checkbox" type="checkbox" value="체크박스1">체크박스1<br>
<input name="checkbox" type="checkbox" value="체크박스2">체크박스2<br>
<input name="checkbox" type="checkbox" value="체크박스3">체크박스3<br>
<input name="checkbox" type="checkbox" value="체크박스4">체크박스4<br>
<input name="checkbox" type="checkbox" value="체크박스5">체크박스5<br>
<input name="checkbox" type="checkbox" value="체크박스6">체크박스6<br>
<input name="checkbox" type="checkbox" value="체크박스7">체크박스7<br><br>
<input type="button" name="button" value="추가" onClick="selectChkBox(this.form);">
<br><br>
<select name="selectBox" style="width:420px;" size="7" multiple ></select>
</form>
</body>
</html>