[8주차] 20. 태그: <select> 선택박스를 만드는 기능

선택박스 만들기1(완전 기본, 이벤트 처리기능도 없는 상태)

- onChange 속성을 주지 않은 상태여서 다른걸 선택한다 해도 그뿐이지, 이벤트를 다룰 수 없다.

- selected 는 선택된 요소를 의미하며, 원래는 selected="selected" 이나 속성이름과 값이 같아서 값을 생략한 것이다.

<!--1. 선택박스가 뭔지 알기 위한 간소화된 형태, 실제 이 코드만으로도  선택박스가 보여짐-->
<select>
	<option selected> 요소1 </option>  
	<option> 요소2 </option>
	<option> 요소3 </option>
</select>

선택박스 만들기2(이벤트만 javascript로 처리하는 방식)

* option으로 들어가는 요소가 많지 않은 경우 사용되는 방식

* onChange속성에서 '선택된 원소가 변경될 시 호출될 함수'를 지정해 줄 수 있는데, 이는 Javascript로 작성됨

  (((링크)))

<!--2. 호출될 함수만 javascript로 처리하는 형태-->
<form name="폼이름">
	<select id="선택박스 아이디" style="width:100px" onChange="호출될 함수(파라미터)">
		<!-- 선택박스에서 하나의 option 선택시 폼이름 변수에 해당 value값이 넘어옴-->
		<option value="선택시 반환할 값1"> Text1 </option>
		<option selected value ="선택시 반환할 값2"> Text2 </option>
		<option value="선택시 반환할 값3"> Tex3 </option>
	</select> 
</form>

선택박스 만들기3(이벤트처리, option태그 추가 모두 javascript로 하는 방식)

* option으로 들어가는 요소가 많은 경우 혹은 이 요소를 코드로 넣어주고자 할 때 사용되는 방식

* <option> 태그를 직접 타이핑 하지 않고, 이를 Javascript로 추가하도록 할 수도 있다.

((링크))

<!--3. javascript 코드와 연계하기 위해 가장 많이 사용되는 형태(option들도 javascript로 추가하게됨)-->
<form name="폼이름">
	<select id="선택박스 아이디" style="width:100px" onChange="호출될 함수(파라미터)">
	</select> 
</form>