728x90
반응형
<!DOCTYPE html>
<style>
.title {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div>
<select style="width:200px;" multiple="" id="menu">
<option value="01">아메리카노 </option>
<option value="02">녹차</option>
<option value="03">오렌지 주스</option>
<option value="04">라떼</option>
</select>
</div>
<div>
<button onclick="AddObject()">담기</button>
</div>
<div>
<select style="width:200px;" id="result" multiple="">
<option>------주문표-------</option>
</select>
</div>
<div>
가격 <span></span>원
<button>주문</button>
</div>
</body>
<script>
function AddObject() {
let selectMenu = document.getElementById("menu").value;
let result = document.getElementById("result");
// console.log(result.childElementCount);
if (selectMenu == "") {
alert("메뉴를 선택해주세요");
return false;
}
if (selectMenu == "01") {
CreateOption(result, selectMenu, "아메리카노", result);
}
if (selectMenu == "02") {
CreateOption(result, selectMenu, "녹차", result);
}
if (selectMenu == "03") {
CreateOption(result, selectMenu, "오렌지주스", result);
}
if (selectMenu == "04") {
CreateOption(result, selectMenu, "라떼", result);
}
}
function CreateOption(resultObj, num, name, Pobj) {
let option = document.createElement("option");
option.setAttribute("value", num);
option.innerText = name;
Pobj.appendChild(option);
}
</script>728x90
반응형
'javascript > 바닐라 js' 카테고리의 다른 글
| [javascript] select value 마지막 option값으로 세팅하는 법 (0) | 2022.05.24 |
|---|---|
| [javascript]-달력그리기(진행중..) (0) | 2022.04.26 |
| [javascript]-자바스크립트 예제 트리그리기 (0) | 2022.04.21 |
| [javascript]자바스크립트에서 false로 간주되는 것 (0) | 2022.04.19 |
| [javascript]자바스크립트 배열 (0) | 2022.04.18 |
