english

select 엘리먼트 다루기

select 엘리먼트의 항목 처리

동적으로 항목 추가

opts[opts.length] = new Option("옵션 text", "옵션 value");

동적으로 항목 제거

opts[2] = null;

자바와 달리 중간에 생긴 빈 공간은 없어지고 배열이 자동으로 정렬된다.

모든 항목 제거

opts.length = 0;

다음 예제는 '프로그래밍 언어'를 선택하면 두 번째 선택 상자에서 메뉴가 생성되는 예제이다. 언어를 선택할 때 최상위 메뉴를 선택하면 두 번째 선택 상자가 초기화되도록 구현했다.

sel.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 select 엘리먼트 다루기</title>
<script type="text/javascript">
function chooseLang() {
	var form = document.getElementById("testForm");
	var lang = form.programLanguage.value;

	switch (lang) {
	case "java":
		form.step.options[0] = new Option("자바과정에대해","javaIntro");
		form.step.options[1] = new Option("객체와 클래스","ClassObject");
		form.step.options[2] = new Option("데이터타입","JavadataType");
		break;
	case "javascript":
		form.step.options[0] = new Option("자바스크립트란","javascriptIntro");
		form.step.options[1] = new Option("데이터타입","JavascriptDataType");
		form.step.options[2] = new Option("자바스크립트객체","JavascriptObjects");
		break;
	default:
		form.step.options.length = 0;
	}
	
}
</script>
</head>
<body>
<form id="testForm" action="sel.html">
	<select name="programLanguage" onchange="chooseLang()">
		<option value="">--언어를 선택하세요</option>
		<option value="java">자바</option>
		<option value="javascript">자바스크립트</option>
	</select>
	<select name="step">
	</select>
	<input type="submit" value="테스트" />
</form>
</body>
</html>
sel.html 예제 실행