템플릿 엔진 으로 select 핸들링 할 때 jquery 응용 방법

고민

제목을 어찌 적어야 할 지 모르겠다...

결론은 jquery 로 select 를 핸들링 할 때에는 

$("select").val(값);

으로 충분한데, 

문제는 템플릿 엔진 으로 값을 넣어야 할 때 이다. 

<input ~~ value="{input_value}"> 

와 같이 넣어도, input 은 이상이 없다. 문제가 되는 것은 select 형태인데.

<select ~~ value="{select_value}">

 <option>dd</option>

이렇게 들어가게 되면 문제가 발생할 여지가 있다. 

해결

고민 끝에 생각해낸 방법은 다음과 같다. 

<select ~~ data-value="{select_value}">

 <option>dd</option>

무난하게 data-value 라는 애트리뷰트 에 값을 넣는다. 

그리고 jquery 를 응용해서,

$(document).ready(function(){
	$("select[data-value]").each(function(){
		if($(this).find("option[value='"+$(this).attr("data-value")+"']").length > 0){
			$(this).find("option[value='"+$(this).attr("data-value")+"']").attr('selected', 'selected');//셀렉트박스
		}
	});
});

와 같이 해주었다. 설명을 덧붙이자면, data-value 라는 애트리뷰트 가 존재할 때, option 값을 뒤져서 data-value 와 동일한게 있으면 selected 하겠다는 내용이다.