오늘은 유튜버 '개발자의품격'님의 [ 웹개발 기초편 - 멀티 Select 처리 ] 편에 대해 공부했다.
<select> 태그를 이용한 실습은 거의 해본적이 없었기에 공부할 수 있어서 좋았다.
이번 공부는 시간이 없어서 CSS 작업은 하지않았다.
코드 작성은 repl.it을 이용했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Loads the Extensions API -->
<script src="https://unpkg.com/@replit/extensions@0.32.1/dist/index.global.js"></script>
</head>
<body>
<h1>나는 지금</h1>
<form id='food-form'>
<select id='food-parent' onchange="loadFoodChild()"></select>
<select id='food-child'></select>
<button id=submit-btn>제출하기</button>
</form>
<h1 id="final-value"></h1>
<script src="script.js"></script>
</body>
</html>HTML 코드
특별한 점은 없다.
async function main() {
await replit.init();
// Uses the Replit Extensions `fs` API to grab the list of files
// in your root folder, and writes it to the document.
const { children } = await replit.fs.readDir('.');
document.write(children.map(c => c.filename).join(', '));
}
window.addEventListener('load', main)
const foodForm = document.getElementById('food-form');
const foodParent = document.getElementById('food-parent');
const foodChild = document.getElementById('food-child');
const finalValue = document.getElementById('final-value');
const foodParentValue = [
{ id: '', value: '' },
{ id: '1', value: '한식' },
{ id: '2', value: '중식' },
{ id: '3', value: '일식' },
];
const foodChildValue = [
{ id: '11', value: '비빔밥' },
{ id: '12', value: '김치찌개' },
{ id: '13', value: '잡채' },
{ id: '21', value: '짜장면' },
{ id: '22', value: '볶음밥' },
{ id: '23', value: '라조기' },
{ id: '31', value: '초밥' },
{ id: '32', value: '라멘' },
{ id: '33', value: '돈부리' },
];
function loadFoodParentValue() {
const emptyArr = [];
foodParentValue.forEach(item => {
emptyArr.push(`<option value=${item.id}>${item.value}</option>`);
});
foodParent.innerHTML = emptyArr.join("");
}
function loadFoodChild() {
const parentValue = foodParent.value;
const emptyArr = [];
// parentValue에 따라 emptyArr에 옵션 태그를 추가
foodChildValue.forEach(item => {
if (item.id.startsWith(parentValue)) {
emptyArr.push(`<option value=${item.id}>${item.value}</option>`);
}
});
foodChild.innerHTML = emptyArr.join("");
}
function handleSubmit(e) {
e.preventDefault();
const found = foodChildValue.find(item => item.id == foodChild.value);
finalValue.innerText = `${found.value} (이)가 먹고싶다!`;
}
foodForm.addEventListener('submit', handleSubmit)
loadFoodParentValue();JavaScript 코드
이번 실습은 조건문과 배열 관련 함수를 이용할 수 있어서 좋았다.
강의에서는 if-else 조건문을 이용하였지만, 나는 switch-case 구문을 이용해 보았다.
** startsWith()
js에서 제공하는 기본 함수이다.
안의 인자값으로 시작하는 값만 true값을 반환한다.
ex)
const hi = 'Hello, world';
hi.startsWith(Hello);위 코드는 true를 반환한다.
하지만 소문자, 대문자 구분을 하기 때문에 필요한 경우 전체 문자열을 소문자, 혹은 대문자로 변환 후 이용해야 한다.
이외에 Array의 forEach, find 함수 등을 이용해 볼 수 있어서 좋았다.
'코딩 리뷰 > [HTML, CSS , JS]' 카테고리의 다른 글
| [HTML, CSS, JS] 요소를 마우스 커서에 따라다니게 하기 (0) | 2023.05.18 |
|---|---|
| [HTML, CSS, JS] 유튜브 클론코딩 리뷰 (0) | 2023.04.26 |
| [HTML, CSS, JS] 모멘텀 클론코딩 리뷰 (0) | 2023.04.12 |
| [HTML, CSS, JS] 반응형 헤더 클론코딩 리뷰 (0) | 2023.04.10 |
| [HTML, CSS, JS] 10000 시간의 법칙 클론코딩 리뷰 (0) | 2023.04.10 |