DOM - Select <1>
getElementById로 임의 접근을 한뒤
getElementByTagName을 사용하게 되면
임의 접근을 해둔 element보다 낮은 레벨의 노드에서
해당 태그를 찾게 되므로 범위를 좁혀서 원하는 노드를 선택할 수 있다.
아래 예제를 보면 getElementsByTagName("option")가 똑같이 사용되었지만
각각 과일과 계절 select아래의 option만 선택한다.

<html>
<head>
<script type="text/javascript">
function alertIndex()
{
var z=document.getElementById("mySelect");
var x=z.selectedIndex;
var y=z.getElementsByTagName("option");
alert(y[x].text + " has the index of: " + y[x].index);
}
function alertIndex2()
{
var z=document.getElementById("mySelect2");
var x=z.selectedIndex;
var y=z.getElementsByTagName("option");
alert(y[x].text + " has the index of: " + y[x].index);
}
</script>
</head>
<body>

<form>
Select your favorite fruit:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<select id="mySelect2">
  <option>spring</option>
  <option>summer</option>
  <option>autumn</option>
  <option>winter</option>
</select>
<br />
<br />
<input type="button" onclick="alertIndex()" value="Show index of the chosen fruit">
<input type="button" onclick="alertIndex2()" value="Show index of the chosen season">
</form>

</body>
</html>

, , , 
by 꽁니아빠 | 2008/01/26 00:28 | JAVA | 트랙백 | 덧글(0)
트랙백 주소 : http://baekyj.egloos.com/tb/3592617
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

:         :

:

비공개 덧글

< 이전페이지 다음페이지 >