목차
1. 리스트박스 아이템 다중 선택 예제
이 예제에서는 리스트박스에서 다중 항목 선택을 가능하게 하는 방법과 선택된 항목들을 처리하는 코드를 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>리스트박스 다중 선택 예제</title>
</head>
<body>
<select id="myList" multiple>
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
<button onclick="getSelectedOptions()">선택된 항목 가져오기</button>
<script>
// 선택된 항목 가져오기 함수
function getSelectedOptions() {
var selectBox = document.getElementById("myList");
var selectedOptions = [];
for (var i = 0; i < selectBox.options.length; i++) {
if (selectBox.options[i].selected) {
selectedOptions.push(selectBox.options[i].value);
}
}
alert("선택된 항목: " + selectedOptions.join(", "));
}
</script>
</body>
</html>
2. 옵션 삭제하기 예제
이 예제에서는 리스트박스의 특정 항목을 삭제하는 방법과 삭제한 항목을 처리하는 코드를 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>옵션 삭제하기 예제</title>
</head>
<body>
<select id="myList">
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
<button onclick="removeOption()">옵션 삭제</button>
<script>
// 옵션 삭제 함수
function removeOption() {
var selectBox = document.getElementById("myList");
var selectedIndex = selectBox.selectedIndex;
if (selectedIndex >= 0) {
selectBox.remove(selectedIndex);
}
}
</script>
</body>
</html>
3. 리스트박스 CSS 적용 예제
이 예제에서는 CSS를 사용하여 리스트박스의 디자인을 개선하는 방법과 예제 코드를 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>리스트박스 CSS 적용 예제</title>
<style>
#myList {
width: 200px;
height: 150px;
font-size: 16px;
}
</style>
</head>
<body>
<select id="myList">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</body>
</html>
4. 클릭 이벤트 핸들러 분리 예제
이 예제에서는 리스트 박스의 아이템 클릭 이벤트 핸들러를 분리하여 관리하는 방법과 예제 코드를 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>클릭 이벤트 핸들러 분리 예제</title>
</head>
<body>
<select id="myList">
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
<script>
// 클릭 이벤트 핸들러 분리
var selectBox = document.getElementById("myList");
selectBox.addEventListener("click", handleListBoxClick);
function handleListBoxClick() {
var selectedOption = selectBox.options[selectBox.selectedIndex].value;
alert("선택된 항목: " + selectedOption);
}
</script>
</body>
</html>
반응형