Vanilla JS - select tag with namedItem

최근에 레거시를 유지 보수하면서, JS 및 JQuery 를 만지는 일이 있었다. 일을 하면서 select 태그의 option 태그를 selected 가 아닌, 특정 value 값을 기준으로 option 태그를 선택 후 해당 텍스트값을 가져와야 하는 작업이 필요했었다. 보통 select 태그를 사용하게 되면, selected 인 option 의 value 혹은 text 값을 핸들링 하는데, 해당 케이스는 보통 케이스와 달라서 아주 잠깐 당황했었다. 해결법은 물론 있다. 레거시를 만지면서, JQuery 를 최대한 걷어내고 있는데, JQuery 선택자를 이용하면 매우 간단하게 해결할 수 있다. 예를 들어, 아래와 같이 한 줄 이면 간단하게 해결이 가능하다. 근데, 요즘 JQuery 를 사용하지 않는데 이점이 더 큰것을 알아가고 있어서 JQuery 를 사용하지 않기로 결심했다. 따라서 namedItem 이라는 method 를 사용해보았다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem The HTMLSelectElement.namedItem() method returns the HTMLOptionElement corresponding to the HTMLOptionElement whose name or id match the specified name, or null if no option matches. name 혹은 id 속성을 이용해서 Element 를 선택한다. 아래에서 확인할 수 있듯이, Edge 와 IE 에서는 name 속성이 지원이 안된다고 한다. 따라서 id 속성을 이용하는것이 크로스 브라우징에 매우 유리하다. 그럼 우선 예제를 보자, 아래와 같이 fruits 라는 id 속성을 가진 sele...