현재버전

이전 질문과 동일한 내용이라, 간단하고 이해하기 쉽게 최대한 풀어서 단순한 자료구조를 사용한 방법으로 구현하면 다음과 같습니다. 참고용도로 사용하시기 바랍니다.


<select id="meal">

<option>-- MEAL --</option>

<option value="breakfast">Breakfast</option>

<option value="lunch">Lunch</option>

<option value="dinner">Dinner</option>

</select>


<div id="menus"></div>
<script> var breakfastMenus = ["계란후라이", "쌀국수", "머핀"]; var lunchMenus = ["치킨", "갈비탕", "순대국"]; var dinnerMenus = ["감자칩", "치즈", "호빵"];
var currentSelectedMealMenus = [];
var meal = document.getElementById("meal"); var menus = document.getElementById("menus");
meal.addEventListener("change", function (event) { var value = event.target.value; if (value == "breakfast") { currentSelectedMealMenus = breakfastMenus; } if (value == "lunch") { currentSelectedMealMenus = lunchMenus; } if (value == "dinner") { currentSelectedMealMenus = dinnerMenus; }
menus.innerHTML = currentSelectedMealMenus.join(", "); console.log(currentSelectedMealMenus); }); </script>



수정이력

2020-12-28 19:52:52 에 아래 내용에서 변경되었습니다.

이전 질문과 동일한 내용이라, 간단하고 이해하기 쉽게 최대한 풀어서 단순한 자료구조를 사용한 방법으로 구현하면 다음과 같습니다. 참고용도로 사용하시기 바랍니다.


<select id="meal">

<option>-- MEAL --</option>

<option value="breakfast">Breakfast</option>

<option value="lunch">Lunch</option>

<option value="dinner">Dinner</option>

</select>


<div id="menus"></div>
<script> var breakfastMenus = ["계란후라이", "쌀국수", "머핀"]; var lunchMenus = ["치킨", "갈비탕", "순대국"]; var dinnerMenus = ["감자칩", "치즈", "호빵"];
var currentSelectedMealMenus = null;
var meal = document.getElementById("meal"); var menus = document.getElementById("menus");
meal.addEventListener("change", function (event) { var value = event.target.value; if (value == "breakfast") { currentSelectedMealMenus = breakfastMenus; } if (value == "lunch") { currentSelectedMealMenus = lunchMenus; } if (value == "dinner") { currentSelectedMealMenus = dinnerMenus; }
menus.innerHTML = currentSelectedMealMenus.join(", "); console.log(currentSelectedMealMenus); }); </script>



cat-footer