JS - Select 다루기

Select 콤보 메뉴에 접근하는 형식은 다음과 같습니다.

document.폼이름.select이름.options[0]

document.폼이름.elements[인덱스].options[0]

속 성	설 명
options	모든 option 항목 배열
name	name 의 속성 값
selectedIndex	항목을 선택한 option 의 인덱스 번호
length	option 개수를 반환

<form name="frm" method="post" action="#">
  <select name="box" onchange="sel_change()">
    <!-- options[0] -->
    <option value="">브라우저를 선택하세요.</option>
    <!-- options[1] -->
    <option value="익스플로어">익스플로어</option>
    <!-- options[2] -->
    <option value="파이어폭스">파이어폭스</option>
    <!-- options[3] -->
    <option value="크롬">크롬</option>
    <!-- options[4] -->
    <option value="오페라">오페라</option>
    <!-- options[5] -->
    <option value="사파리">사파리</option>
  </select>

  <input type="submit" value="전송" onclick="send()">
</form>

<script>
  // Options 을 모두 출력을 합니다.
  var opt = document.frm.box.options;
  for(var i = 0; i < opt.length; i++) {
   document.write( opt[i].value + "<br/>");
  }

  // 두 번째 options 값은 "익스플로어" 입니다.
  document.write( document.frm.box.options[1].value + "<br/>");

  // 폼 전송할 때 선택한 값을 대화상자로 보여줘요
  function send() {
    alert( opt[opt.selectedIndex].value + " 을 선택하였습니다.");
  }

  // onChange 예제
  // 다른 항목을 선택하면 이벤트가 발생해요.
  function sel_change() {
    var sel = document.frm.box;
    alert( sel.options[sel.selectedIndex].value
                   + " (을)를 선택하였습니다.");
  }
</script>