본문 바로가기
IT_Developers/Javascript

JavaScript - select readonly 적용

by 고코더 2017. 8. 30.


셀렉트 박스 값 변경하지 못하게 하기  (readonly)


select박스는 알다시피 readonly가 먹지가 않습니다.
그렇다고 disabled 를 하면 post로 넘어온 값을 받을 수 없습니다.
disabled로 인해 얼어 버린 select 박스는 고객 입장에서는 문제가 생겼나라는 생각이 듭니다.

그래서 오늘은 select box의 readonly 효과를 흉내내는 방법을 구현해봤다.

▼아래와 같이 onFocus와 onChange를 이용해
Readonly 와 같은 효과를 낼 수 있다.
<html>
<body>
<select onFocus='this.initialSelect this.selectedIndex;onChange='this.selectedIndex this.initialSelect; >
   <option 1</option>
   <option 2</option>
   <option 3</option>
</select>
</body>
</html>




▼다른 값을 선택한다고 해도 최초의 selected 된것을 하면 기존의 값 그대로 다시 선택 된다.



마무리


가을이네요^^ 취미가 있으신가요? 일도 좋지만 재밌어 하는것에도 미쳐보세요 



댓글