[HTML_Objects] JS - <option> 객체 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)

목차

1. <option> 객체 정의 - 옵션 (= 선택사항)
2. <option> 객체 구문
3. <option> 객체 예제 - 접근
4. <option> 객체 예제 - 생성
5. <option> 객체 속성

<option> 객체 정의 - 옵션 (= 선택사항)

 

HTML <option> 태그(요소) 의미.

 

<option> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

또는,

var x = document.getElementById("폼요소ID").elements

또는,

var x = document.getElementById("실렉트요소ID").options

 

[생성]

var x = document.createElement("OPTION");

 

<option> 객체 예제 - 접근

 

<select>

  <option id="hz" value="html">HTML</option>

  <option value="css">CSS</option>

</select>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").text;

  document.getElementById("demo").innerHTML = x;

}

</script> 

 

결과보기 

<option> 객체 예제 - 생성

 

<select id="hz">

</select>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.createElement("OPTION");

  x.setAttribute("value", "html");

  var t = document.createTextNode("HTML");

  x.appendChild(t);

  document.getElementById("hz").appendChild(x);

}

</script> 

 

결과보기 

<option> 객체 속성

 

defaultSelected

선택 속성의 기본값 반환.

 

disabled

옵션의 비활성화 여부 설정/반환.

 

form

옵션이 포함 된 양식에 대한 참조 반환.

 

index

드롭 다운 목록에서 옵션의 인덱스 위치 설정/반환.

 

label

드롭 다운 목록에서 옵션의 label 속성값 설정/반환.

 

selected

옵션의 선택된 상태 설정/반환.

 

text

옵션의 텍스트 설정/반환.

 

value

서버로 보낼 옵션 값 설정/반환. 

 

※ <option> 객체는 표준 속성/메서드/이벤트 지원.