셀렉트 박스 값 변경하지 못하게 하기 (readonly)
select박스는 알다시피 readonly가 먹지가 않습니다.
그렇다고 disabled 를 하면 post로 넘어온 값을 받을 수 없습니다.
disabled로 인해 얼어 버린 select 박스는 고객 입장에서는 문제가 생겼나라는 생각이 듭니다.
그래서 오늘은 select box의 readonly 효과를 흉내내는 방법을 구현해봤다.
▼아래와 같이 onFocus와 onChange를 이용해
Readonly 와 같은 효과를 낼 수 있다.
gocoder_selectreadonly.html<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>
<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 된것을 하면 기존의 값 그대로 다시 선택 된다.
마무리
가을이네요^^ 취미가 있으신가요? 일도 좋지만 재밌어 하는것에도 미쳐보세요
'IT_Developers > Javascript' 카테고리의 다른 글
| jQuery | Plugin - select 박스 검색 가능하게 (3) | 2017.11.02 |
|---|---|
| Javascript - 아이폰,안드로이드 기기 체크 (0) | 2017.11.02 |
| jQuery - 바코드(barcode) 만들기 (4) | 2017.09.04 |
| JavaScript - select 박스의 option value, text 가져오기 (0) | 2017.08.31 |
| Javascript - 자바스크립트 암호화, 압축하기 / packer (0) | 2017.08.30 |
댓글