티스토리 뷰
<html>
< head>
< title> select 객체 예제 </title>
< script language="JavaScript">
var job = new Array("고등학생","대학생","대학원생","회사원","교수","정당인")
function test()
{
var str="리스트 원소의 갯수는 "
str += document.myform.job.options.length
str += "
"
str += "선택한 값은
"
str += document.myform.job.options.selectedIndex
str += "
"
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
<input type="button" value="추가" onclick="sAdd(this.form.job, this.form.ntxt.value, this.form.ntxt2.value)">
</form>
< /body>
< /html>
'Language > JavaScript' 카테고리의 다른 글
| [ JavaScript ] javascript 로 xml 의 데이터 가져오기 (0) | 2015.11.29 |
|---|---|
| [ JavaScript ] CONFIRM - 확인 창 (0) | 2015.11.29 |
| [ JavaScript ] 정규식 (0) | 2015.11.29 |
| [ JavaScript ] 문자->숫자 / 숫자->문자 (0) | 2015.11.29 |
| [ JavaScript ] 날짜 비교 (0) | 2015.11.29 |