<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title> 폼 예제 2</title>
</head>
<script type="text/javascript">
function moveUp()
{
idxSel = document.frm.play.selectedIndex;
strSel = document.frm.play.options[idxSel].text;
if( idxSel > 0 ){
document.frm.play.options[idxSel].text = document.frm.play.options[idxSel-1].text;
document.frm.play.options[idxSel-1].text = strSel;
document.frm.play.options[idxSel-1].selected = true;
}
}
function moveDown()
{
idxSel = document.frm.play.selectedIndex;
strSel = document.frm.play.options[idxSel].text;
maxSel = document.frm.play.options.length;
if( idxSel < maxSel ){
document.frm.play.options[idxSel].text = document.frm.play.options[idxSel+1].text;
document.frm.play.options[idxSel+1].text = strSel;
document.frm.play.options[idxSel+1].selected = true;
}
}
</script>
<body>
내가 제일 좋아하는 놀이 순서대로 한다면 <br>
<form name="frm">
<select name="play" size="8">
<option selected> 숨쉬기 </option>
<option> 밥먹기 </option>
<option> 그냥있기 </option>
<option> 잠자기 </option>
<option> 술먹기 </option>
<option> 멍때리기 </option>
</select> <br>
<input type="button" value="▲" onclick="moveUp()"><br><br>
<input type="button" value="▼" onclick="moveDown()"><br><br>
</form>
</body>
</html>
'it > JavaScript' 카테고리의 다른 글
| DOM이용한 동적 테이블 추가에서 삭제까지.. (0) | 2014.08.19 |
|---|---|
| getElementById (0) | 2014.08.19 |
| 여행 (0) | 2014.08.19 |
| formTest 외부Script (0) | 2014.08.19 |
| 전화번호 정규화 (0) | 2014.08.19 |
