option속성
select태그안의 항목을 배열형태로 정보를 가지고 있습니다.
options.length : 항목의 갯수를 알아냅니다.
options.SelectedIndex : 선택된 항목의 인덱스값. 선택된 항목이 없으면 '-1'을 반환.
options[인덱스번호].defaultSelected : 기본적으로 선택되어 있는 항목인지를 알아냅니다. 설정유무에 따라 True, False값을 반환합니다.
options[인덱스번호].index : 항목의 인덱스번호를 반환합니다.
options[인덱스번호].selected : 항목의 선택유무를 알아냅니다.
options[인덱스번호].text : 항목의 문자열을 반환합니다.
options[인덱스번호].value : 항목의 value값을 반환합니다.
onchange : 항목을 변경/선택하면 이벤트를 수행합니다.
<html>
<script language="JavaScript">
<!--
function sel_item() { // 콤보박스와 관련된 함수입니다.
win = window.open("","") // 새로운 창이 생성되어 해당사이트를 보여줍니다.
if (frm1.myselect.options[0].selected)
win.location.href = "http://www.naver.com"
else if (frm1.myselect.options[1].selected)
win.location.href = "http://www.daum.net"
else if (frm1.myselect.options[2].selected)
win.location.href = "http://www.empas.com"
}
function site_move() { // 리스트박스와 관련된 함수입니다.
var myindex = frm1.mysel.selectedIndex;
if (myindex == -1)
alert("항목을 선택하지 않았습니다.");
else
location.href = frm1.mysel.options[myindex].value;
}
// -->
</script>
<body>
:: 이동할 포털사이트를 선택하세요 ::
<form name="frm1" method="get">
<select name="myselect" onchange="sel_item()">
<option>네이버</option>
<option>다음</option>
<option>엠파스</option>
</select>
<br><br><hr><br>
<select name="mysel" size=3>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.daum.net">다음</option>
<option value="http://www.empas.com">엠파스</option>
<option value="http://www.yahoo.co.kr">야후</option>
</select>
<br><br>
<input type="button" value="이동합니다" onclick="site_move()">
</form>
<hr>
</body>
</html> |
|
|
|
|
|
