[html] select 태그 읽기 전용(readonly), disabled

 

html 컨트롤의 select  태그는 input 태그 처럼 readonly에 대한 속성이 적용되지 않는다.

 

disabled 속성으로 추가 하면 select 선택이 불가하지만 select 태그가 disabled 가 되어 form 으로 submit 을 할 경우에는 select 값이 전송되지 않는다.  따라서, form 으로 submit 을 해야 한다면 disabled 속성을 사용하면 안된다.

방법 1)

선택값 변경을 하지 못하도록 하기 위해서는 onchange에 현재 값으로 다시 적용하여 값 변경을 하지 못하도록 한다.

<select name="option" class="readonly" onFocus="this.initialSelect = this.selectedIndex;" onChange="this.selectedIndex = this.initialSelect;">
  <option value="1"> 1번 선택</option> 
  <option value="2"> 2번 선택</option>
</select>

 

 

 

---

방법 2) 추가

CSS 스타일을 이용한 방법

select[readonly] {
  background-color: #ddd;
  pointer-events: none;
}

위의 CSS 코드는 select 태그에 readonly 속성이 있을 경우, 배경색을 #ddd (연한 회색)으로 변경하고, 포인터 이벤트(pointer events)를 비활성화하여 사용자가 클릭할 수 없도록 만들어줍니다. 이렇게 적용하면 사용자는 값을 변경할 수 없지만, 값을 확인할 수 있습니다.

 

HTML 파일에서는 다음과 같이 적용한다.  select 태그의 readonly 속성을 삭제해주면 select 값을 선택 변경이 다시 가능해진다.

<select readonly>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>