Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Developer Gonie

[8주차] 24. <select> 요소(선택박스)의 option 들을 추가하는 예시 본문

K-DigitalTraining 강의/6. Javascript(웹표준)

[8주차] 24. <select> 요소(선택박스)의 option 들을 추가하는 예시

이대곤 2022. 7. 8. 17:34

* javascript에서 BOM(브라우저 객체모델)은 html 내에 <form>요소가 존재하면 이를 객체화 하여 관리한다.
  따라서, <form id='~~'> 혹은 <form name='~~'> 으로 id 또는 name속성을 부여했다면 이것을 통해 해당 요소에 접근할 수 있고,
  form 내부의 요소도 id 또는 name 속성을 가진다면 이를통해 바로 원하는 요소에 접근할 수 있다. 
  주의할 점으로, form 요소 내부의 요소에는 form 요소를 통하지 않고 바로 접근할 수 없다.  

 

* select 요소에 대한 객체 내부에는 options 멤버가 준비되어 있는데 이 멤버는 크기가 정해지지 않은 배열을 가져
  options = new Array() 와 같이 준비되어 있어 바로 원소들을 추가할 수 있다.

 

* 보통 <select> 요소의 <option> 요소들은 화면이 뜨는 동시에 추가되어 있어야 하므로 body 태그에 onLoad 속성을 추가하여
  추가하는 작업을 해주는 함수를 작성한다. 여기서는 init() 함수를 정의하여 사용하였다.

동일코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	
	// 첫번째 선택박스를 위한 2차원 배열
	var arr = new Array("선택", "한식", "중식", "일식", "외국식");
	
	function init(){
		var sel1 = myform.first;     
		
		for (i = 0; i < arr.length; i++) {
			sel1.options[i] = new Option(arr[i]); // text와 value의 값이 같다면 하나만 써줘도 됨. 
		}
		
		/* 
		원래는
		window.document.myform.first 와 같이 싸줘야 하는데
		window.document.를 생략한 형태로 사용 한것이다.
		또한, 
		window.myform.first도 가능하고
		document.myform.fisrt와 같이 사용하는 것도 가능하다.
		*/
		
		// option 요소는 value속성값과 text부분을 보통 포함되는데 두 값을 서로 다르게 주고 싶다면 아래를 참고 
		// sel1.options[i] = new Option(arr[i], value 속성의 값); // text부분, value 속성의값
		// javascript에서 배열은 추가하는 족족 크기가 늘어남
	}
	</script>
</head>
<body onLoad="init()">
		<form name="myform">
			<select id="first" style="width:100px"> 
			</select>
		</form>
</body>
</html>

 

저작자표시

'K-DigitalTraining 강의 > 6. Javascript(웹표준)' 카테고리의 다른 글

[8주차] 26. 내장객체 String 문자열 관련 함수  (0) 2022.07.08
[8주차] 25. select 요소(선택박스)의 이벤트를 처리하는 예시  (0) 2022.07.08
[8주차] 23. 바로 사용가능한 객체(내장객체, BOM, DOM)  (0) 2022.07.07
[8주차] 22. 요소에 대한 클릭 이벤트를 처리하는 방법  (0) 2022.07.07
[8주차] 21. 자바스크립트, 날짜와 시간 정보를 얻을 수 있는 Date()  (0) 2022.07.02
'K-DigitalTraining 강의/6. Javascript(웹표준)' Related Articles more
Comments