[JS] Select Box 에서 readonly 설정하기

select box는 readonly가 없다.

select box를 사용자가 사용하지 못하게 하는 속성으로 disabled가 있는데 select box를 disabled=true 를 해버리면

페이지에서 form을 넘길때 select box의 값을 못넘긴다.

반응형

select box에서 readonly는 없지만 동일한 효과를 내는 방법은 다음과 같다.

< select name='selectTxt' id='choice' readonly style='background-color:#ababab'
onFocus='this.initialSelect = this.selectedIndex;'
onChange='this.selectedIndex = this.initialSelect;' >
<option value=''> </option>
<option value='Y' selected>Y</option>
<option value='N'>N</option>
</select>

제이쿼리 사용

$("select[name=searchTxt1]").attr('onFocus', 'this.initialSelect = this.selectedIndex;');
$("select[name=searchTxt1]").attr('onChange', 'this.selectedIndex = this.initialSelect;');

해당 방법은 선택 값 변경을 하지 못하도록 onchange에 현재 값으로 다시 적용하여 값을 변경하지 못하도록 한 방법이다.