2015-10-30

selectbox는 input과는 다르게 readonly가 먹히질 않는다.
그렇지만 disabled 속성은 먹히기 때문에 보통 selectbox를 readonly처리 할때는, disabled를 먹여놓고 submit가 발생하기 전에 살짝 disabled 속성을 제거해준뒤에 다시 disabled 속성을 추가하는 방법을 쓰곤 한다.
disabled를 먹힌채로 submit가 되면 해당 값이 넘어가지 않기 때문에 이런 편법을 쓰는것이데..
프로그램을 짜다보면, 구조상 이런 방식도 쓰기 힘들거나, 좀더 다른식의 readonly가 필요 할때가 생긴다.

아래가 바로 그런 경우중 하나 이다.
보통은 selectbox가 보여야 하는데 옵션에 따라서, 해당 selectbox의 실제 선택된 value의 text값만 보여줘야 할때 말이다.

그럴때는 아래와 같은 소스를 사용하거나 하는 방법도 있다는걸 알아두길 바란다.
동작이 작동하는걸 알기 쉽게 하기 위해서 button으로 동작하게 만들어 보았다

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){
	$('#btn').click(function(){
		$('select[name=sel1]').prop('outerHTML', $('select[name=sel1]').prop('outerHTML')+$('select[name=sel1] option:selected').text());
		$('select[name=sel1]').hide();
	});
});
</script>

<select name="sel1">
<option value='1'>하나</option>
<option value='2' selected>두울</option>
<option value='3'>세엣</option>
</select>

<br><br>
<input type="button" id="btn" value="hide selectbox">

간단한 설명을 해주자면, object의 속성중 "outerHTML"는 실제로 해당 오브젝트의 html 전체를 가지고 있는 값이다.
그래서 해당 오브젝트의 원본에 해당 오브젝트의 표시값을 더해주어 표시한뒤에, 해당 오브젝트는 숨겨줘 본 것이다.