현재 버전

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


<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 에 아래 내용에서 변경 됨 #1

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


<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>