[HTML/JS] select 태그에 option 대신 input 값 넣기, 이 후 select 태그로 초기화 하기

본 포스팅은 기록 목적으로, 화면 구현을 위해 코드에 일부 하드코딩이 포함되어 있습니다. select태그의 option에 없는 값을 저장하고 싶을 때, 사용자가 Input 값으로 직접 입력하여 저장하게끔 하는 기능을 만들어야했다..! 관련 코드와 함께 내가 겪었던 문제 상황을 함께 적으려 한다. 화면 좋아하는 간식을 골라야하는데, 요즘 간식 종류가 많아지다 보니 옵션에 사용자의 취향이 없었고, '기타'로 두기보다는 사용자의 취향에 맞게 입력할 수 있게 한다고 가정해보자. example.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <div> <label for = "snack">좋아하는 간식을 고르세요.</label> <select id = "snack" type="text" style = "display: block;"> <option val...