구글상단


[javascript] Select Box 의 Option List 추가 & 삭제 - 예제 프로그램 by 놀라운넘

  

◈ Select Box 의 Option List 추가 & 삭제



  예제 프로그램

 

<html>
<head>
<title> select 객체 예제 </title>
<script language="JavaScript">
var job = new Array("고등학생","대학생","대학원생","회사원","교수","정당인")
function test()
{
var str="리스트 원소의 갯수는 "
str += document.myform.job.options.length
str += "\n"
str += "선택한 값은\n"
str += document.myform.job.options.selectedIndex
str += "\n"
str += document.myform.job.value
alert(str)
}

 

function sAdd(srcList, nTxt, nTxt2) {

if(nTxt != "") {
new_option = new Option(nTxt,nTxt2);
srcList.options.add(new_option,0);
alert(nTxt+"를 추가하였습니다");
}
}

function sDel(srcList){
for( var i =0; i < srcList.options.length ; i++ )
{
if ( srcList.options[i] != null && ( srcList.options[i].selected == true ) )
{

alert(srcList.options[i].text + "를 삭제하였습니다");
srcList.options[i] = null;
}
}
}


function sDel2(srcList){
// Select Box all delete
for( var i = srcList.options.length ; i >= 0; i-- )
{
srcList.options[i] = null;
}
}
</script>
</head>
<body>
당신의 직업을 선택하세요.
 <form name="myform">

  <select name="job">
   <option value="고등학생" selected> 고등학생
   <option value="대학생"> 대학생
   <option value="대학원생"> 대학원생
   <option value="회사원"> 회사원
   <option value="교수"> 교수
   <option value="정당인"> 정당인
  </select>
  <input type="button" value="확인" onClick="test()">
  <input type="button" value="삭제" onclick="sDel( this.form.job)">
  <input type="button" value="모두삭제" onclick="sDel2( this.form.job)">

  <br>
  직업 명 : <input type='textbox' name='ntxt' value=''> text <br>
  직업 키 : <input type='textbox' name='ntxt2' value=''> value &nbsp;
  <input type="button" value="추가" onclick="sAdd(this.form.job, this.form.ntxt.value, this.form.ntxt2.value)">

 </form>
</body>
</html>



이글루스 가든 - 프로그래머 최고수가 되는 길


 블로그코리아에 블UP하기

덧글

  • 앙되요 2010/03/02 10:54 # 삭제 답글

    필요했는데 잘쓸께요~ 퍼가요~
  • 놀라운넘 2010/03/03 20:37 #

    작은 도움이라도 되었다니 다행입니다.
  • 감사감사 2010/04/09 11:32 # 삭제 답글

    좋은도움되었습니다... 멀티선택으로 바꾸어서 사용중입니다 ^^
댓글 입력 영역


[BEST] Funny baby videos

통계 위젯 (화이트)

413
86
1030024

코튜버

[TOP] KoTuber Funny videos

구글 애드센스