HTML DOM 옵션 개체

<시간/>

HTML DOM 옵션 Object는 HTML 문서의

이제 옵션 개체를 만드는 방법을 살펴보겠습니다 -

구문

다음은 구문입니다 -

document.createElement(“OPTION”);

속성

다음은 Object −

옵션의 속성입니다.

속성	설명
비활성화됨	옵션 요소의 비활성화 여부를 반환하고 수정합니다.
기본 선택	HTML 문서에서 옵션 요소의 기본값을 반환합니다.
양식	HTML 문서에서 옵션 요소를 포함하는 형식의 참조를 반환합니다.
색인	HTML 문서에서 옵션의 인덱스 위치를 반환하고 수정합니다.
레이블	HTML 문서에서 옵션의 레이블 속성 값을 반환하고 변경합니다.
선택됨	옵션의 선택된 속성 값을 반환하고 변경합니다.
텍스트	옵션의 텍스트를 반환하고 수정합니다.
값	서버를 통해 보낼 옵션의 값을 반환하고 수정합니다.

예시

HTML DOM 옵션 객체의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#fff;
      color:#0197F6;
   }
   h1{
      color:#23CE6B;
   }
   .btn{
      background-color:#fff;
      border:1.5px dashed #0197F6;
      height:2rem;
      border-radius:2px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#0197F6;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM option Object Demo</h1>
<select class="drop-down"></select>
<button onclick="createDropDownList()" class="btn">Create a drop-down option</button>
<script>
   function createDropDownList() {
      var option = document.createElement("option");
      option.setAttribute("value","Hello");
      option.innerText='Hello';
      document.querySelector(".drop-down").appendChild(option);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 옵션 개체

'드롭다운 옵션 만들기를 클릭합니다. ” 버튼을 눌러 옵션 개체를 만든 다음 드롭다운 목록에 추가합니다.

HTML DOM 옵션 개체