Programming/JavaScript
[JavaScript] Select Box
Isaac S. Lee
2023. 10. 6. 15:51
🍁Select Box
모든 입력 컨트롤은 입력된 값이 value 속성이다.
이로 인해 사용자가 무엇을 선택했는지 알 수 있게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>셀렉트 박스</h1>
<select name="sel1">
<option value="f1">사과</option>
<option value="f2">딸기</option>
<option value="f3">바나나</option>
<option value="f4">키위</option>
<option value="f5">망고</option>
</select>
<hr>
<input type="button" value="버튼1" name="btn1">
<input type="button" value="버튼2" name="btn2">
<input type="button" value="버튼3" name="btn3">
<input type="button" value="버튼4" name="btn4">
<input type="button" value="버튼5" name="btn5">
</body>
</html>
위 코드를 가지고 Select Box에 대해서 알아보도록 하자.
value
sel1.value = 'f3';value가 f3인 데이터는 바나나이다.
초기값은 사과지만, 위 코드를 실행하면 바나나가 선택된다.
selectedIndex
alert(sel1.selectedIndex);
sel1.selectedIndex = 1;
selectedIndex로 현재 선택된 옵션의 인덱스를 확인할 수 있다.
이 속성으로 선택 인덱스를 변경해 줄 수 있다.
동적으로 항목 추가
- new Option
옵션이라는 내장 객체가 존재한다.
태그를 생성하여 동적으로 항목을 추가할 수 있다.
//<option> 중복 추가 방지
for (var i=0; i<sel1.options.length; i++) {
if (sel1.options[i].text == '파인애플'){
return;
}
}
var op = new Option(); //<option></option>
op.value = 'f6'; //<option value='f6'></option>
op.text = '파인애플'; //<option value='f6'>파인애플></option>
sel1.options.add(op); //<select> + <option> 연결
망고 다음으로 파인애플 옵션이 추가되었다.
중복으로 파인애플을 추가할 수 없도록 유효성 검사를 하였다.
동적으로 항목 삭제
sel1.options.remove(2);
인덱스에 shift가 발생하여 빈 자리를 채운다.
사용자 선택 삭제
sel1.options.remove(sel1.selectedIndex);사용자가 선택한 과일을 삭제할 수 있다.
사용자가 바나나 옵션을 선택하고 삭제를 하면 바나나 옵션이 삭제된다.
단일 선택 다중 선택
단일 선택
alert(sel1.value);
다중 선택의 첫 번째 것만 돌려주므로 위 방법은 단일 선택할 때에만 사용한다.
다중 선택 읽기 작업
for (var i=0; i<sel1.options.length; i++) {
//alert(sel1.options[i].selected);
if (sel1.options[i].selected) {
alert(sel1.options[i].text + '(' + sel1.options[i].value + ')');
}
}
옵션 스스로가 자신이 선택되고 선택되지 않았다는 것을 알고 있다.
다중 선택할 때에는 모든 옵션을 하나씩 접근해서 선택되었는지를 물어봐야 한다.
다중 선택 쓰기 작업
sel1.options[1].selected = true;
sel1.options[2].selected = true;
sel1.options[3].selected = true;
다중 요소의 selected 속성을 true로 설정하면 다중 요소가 선택된다.
