[JS] reset 버튼

리셋버튼을 누르면 선택으로 바뀌게 하기

<select name="" id="">
    <option value="" selected="selected">선택</option>
    <option value="banana">바나나</option>
    <option value="berry">딸기</option>
    <option value="apple">사과</option>
</select>

<button>리셋</button>

const select = document.querySelector('select');
const button = document.querySelector('button');

select.addEventListener('change', function () {
    const value = select.options[select.selectedIndex].value;
    console.log(value);
});

button.addEventListener('click', function () {
    select.options[0].selected = true;
});

버튼을 클릭했을 때 select.options[0]는  <option></option> 선택 태그이고

select.options[0].selected 는 선택 태그의 속성인 selected를 가리키므로 true로 바꿔주면 선택으로 바뀌게 된다.

 

selectedIndex = 선택한 option의 인덱스를 가리킨다.