자바스크립트 option

개발/실전 2014. 3. 14. 17:01

document.form.formname.options[0]=new Option('text값1','value값1');
document.form.formname.options[1]=new Option('text값2','value값2');
document.form.formname.options[2]=new Option('text값3','value값3');

 

 

다음과 같은거임!!


 

<option value="value값1"> text값1 </option>

<option value="value값2"> text값2 </option>

<option value="value값3"> text값3 </option>

[출처] JAVASCRIPT - new Option();|작성자 메멘토

 


  넷스케이프 내비게이터 3.0붜는 자바스크립트에서 옵션 메뉴를 만들 수 있는 생성자 함수 Option()을 제공하기
  시작하였다.  이 함수를 이용하면 자바스크립트에서 동적으로 옵션 메뉴가 만들어지게 되는 것이다.


  option_name = new Option([optionText, optionValue, defaultSelected, selected[)


  여기에서 optionText는 옵션 메뉴에 나타나는 문자열을 가리키고, optionValue는 이 옵션 메뉴를 선택했을 때 리
  턴되는 값을 가리키게 된다.


  EX :
     <HTML>
     <HEAD>
        <TITLE>자바스크립트 테스트</TITLE>
        <SCRIPT LANGUAGE="JavaScript">
        <!--
            function appendOption1(form) {
                var option1 = new Option("Option1", "1st_option", true)
                form.test_select.options[1] = option1
            }
            function appendOption2(form) {
                var option2 = new Option("Option2", "1st_option")
                form.test_select.options[2] = option2
            }
        // 자바스크립트 끝 -->
        </SCRIPT>
     </HEAD>
     <BODY>
        <H1> 옵션 메뉴 추가 </H1><P>
        <FORM>
            <SELECT NAME="test_select" SIZE=5>
                <OPTION VALUE="option_existed"> Option0
            </SELECT><P>
            <INPUT TYPE="button" VALUE="append Option1"  onClick="appendOption1(this.form)">
            <INPUT TYPE="button" VALUE="append Option2"  onClick="appendOption2(this.form)">
        </FORM>
     </BODY>
     </HTML>


  <옵션 메뉴 삭제하기>
  리스트 박스에서 옵션 메뉴를 삭제하는 것은 매우 간단하다. 삭제하고 싶은 곳에 있는 옵션 메뉴 값을 null로
  만들어 버리게 되기 때문이다.  예를 들어 첫 번째 옵션 메뉴를 삭제 하고 싶다면 다음과 같이 하면된다.

     selectName.options[0] = null


  <옵션 메뉴 선택 상태 바꾸기>
  현재 리스트 박스에 잇는 옵션 메뉴 중에서 현재 선택되어 있는 것을 바꾸는 방법에 대해 살펴보자. 먼저 오직
  한 가지만 선택하는 단일 선택의 경우에는 다음과 같이 select  객체의 selectedIndex 값을 바꾸어주면
  선택된 옵션 메뉴가 바뀌게 된다.


   selectName.selectedIndex = I


  두 번째로 MULTIPLE 속성을 사용하여 다중 속성으로 설정되어 있는 경우에는 옵션 객체의 selected 특성을
  바꾸어 주면 된다. 예를 들어 i번째 옵션 메뉴가 선택되도록 만들고 싶다면 다음과 같이 하면된다.


   selectName. options[i].selected = true