[javascript] select value 마지막 option값으로 세팅하는 법

<select id="animal">
    <option value="01">개</option>
    <option value="02">고양이</option>
    <option value="03">토끼</option>
</select>
<button onclick="f_getLastIndex()">마지막값으로 세팅</button>

<script>

    function f_getLastIndex()
    {
        //select박스 가져오기(id로)
        let selectBox=document.getElementById("animal");
        //select박스 option길이 가져오기
        let length=selectBox.length;
        
      //select value값에 마지막 옵션의 값을 넣어준다.
        selectBox.value=selectBox[length-1].value;
        
    }
</script>

select는 배열처럼 index를 이용해 optuion value값에 접근가능하다. 그래서

select의 길이값을 가져와 index부분에 length-1을 넣어주면 마지막 option값의 value에 접근 할 수 있다. 

 

 select.value에 마지막 옵션값 value값을 넣어주면 마지막 option값이 들어가게 된다.

 

함수 실행전

버튼 클릭- 함수 실행 했을때