dynamic select box
제대로 구현하기
7/19 개발일기
꾸준히 개발을 하면 확실히 매일 매일 배우는 점이 있다. 오늘은 별거 아닌 기능(dynamic select box)을 개발하다가 새로운 사실을 알았다. prop()와 attr()의 차이였는데, 일단 내가 처음 구현하려고 했던 소스는 아래와 같다.
/* 클래스의 과목에 따라 교재 제공 여부 selectBox의 selected 값을 변경한다.
영어 과목 인 경우에는 교재가 지급되지 않고, 그 외 과목은 모두 지급 된다고 가정 */
function changeOption(){
var class = $('#classSelectBox option:selected').val();
if(class .indexOf("영어")>=0){
$('#bookSelectBox').find("option[value=false]").attr("selected","selected");
}else{
$('#bookSelectBox').find("option[value=true]").attr("selected","selected");
}
}
위 예제는 class SelectBox 에서 selected 된 값을 가져와 bookSelectBox 에 세팅한다.
간단하게 구현한 줄 알았는데! 버그가 있었다.
일단 selected 값이 초기화되지 않아서 option을 왔다갔다 하면 모두 selected 속성을 갖고 있었던 것. 그래서 아래와 같이 한 줄 더 넣어줬다.
$('#bookdSelectedBox').removeAttr("selected");
이렇게 해결이 된 줄 알았으나.. 흠흠..
보니까 이것 외에도 default로 DB에서 값을 갖고 와 기본 option 을 selected 처리 해주면, 해당 option 에서 다른 걸로 사용자가 바꾸더라도 해당 option 의 selected attribute 가 살아있는 것을 발견했다. 말이 복잡한데.. 스샷을 보면 쉽다!
수강기간 '36개월'(ㅎㅎ) 로 selected=selected 를 기본적으로 주었다.
사용자가 12개월로 변경해도 36개월에 부여된 selected 속성 값이 지워지지 않는다.사실 큰 문제는 없지만, 이게 약간 잔상이 남는 것처럼 정리되지 않고 깔끔하지 않다고 느껴졌다. 그래서 찾아보니, select box를 제어할 때에는 attr 로 제어하기 보다 prop 로 제어하는 편이 깔끔하다는 포스팅을 발견했다. 그리하여 아래와 같이 변경했더니 더 이상 위와 같은 문제가 발생하지 않았다.
function changeOption(){
var class = $('#classSelectBox option:selected').val();
if(class .indexOf("영어")>=0){
$('#bookSelectBox').find("option[value=false]").prop("selected",true);
}else{
$('#bookSelectBox').find("option[value=true]").prop("selected",true);
}
}
selectbox에서만 발생하는 게 아니라 checkbox에서도 이러한 문제가 발생한다고 한다. checked= checked 로 속성을 준 경우, 다른 걸 체크하더라도 그 속성은 사라지지 않는다. 그래서 이전 속성을 removeAttr("checked") 로 직접 지워야 한다. property 는 DOM 속성이고, attribute 는 HTML 태그라고 이해하면 쉽다. 따라서 체크박스에서도 .prop() 함수를 사용하면 checked 여부를 true/false의 동적인 상태로 쉽고 간명하게 제어할 수 있다.
※jQuery 공홈에서도 prop() 와 attr()의 차이를 상세하게 설명하고 있다.
