[JavaScript/jQuery] 더블 셀렉트 박스

더블 셀렉트 박스를 구현해야 해서 매번 첫번째 셀렉트 박스에 따라 두번째 셀렉트 박스를 세팅해줄 때 디비에서 불러오다가, 한번에 불러와서 입출력을 줄여보자는 의미에서 다음 함수를 작성하였다.

==== 스크립트 부분 ====

<script>

//다큐먼트 레디

$(function(){

//Jackson 이용 List<VO> or List<Map<String,String>> 형태 JSON

var ARR = [{"month":"01","year":"2018"},{"month":"02","year":"2018"},{"month":"05","year":"2017"},{"month":"06","year":"2017"},{"month":"07","year":"2017"}];

setFirstSelect(ARR); //년도세팅

setSecondSelect(ARR,$("#year").val()); //월세팅

$("#year").change(function(e){

setSecondSelect(ARR,this.value);

});

});

function setFirstSelect(ARR){

//첫번째 셀렉트 값을 중복제거 후 입력

var ARR_TEMP = new Array();

for(var i=0;i<ARR.length;i++){

var isTF = true;

for(var j=i+1;j<ARR.length;j++){ 

if(ARR[i].year==ARR[j].year){

isTF = false;

}

}

if(isTF){

ARR_TEMP.push(ARR[i].year);

}

}

var appendYear="";

  ARR_TEMP.sort();

for(var i=0;i<ARR_TEMP.length;i++){

appendYear+="<option value='"+ARR_TEMP[i]+"'>"+ARR_TEMP[i]+"</option>";

}

$("#year").empty().append(appendYear);

}

function setSecondSelect(ARR,value){

//첫번째 셀렉트 값에 따라 두번째 셀렉트 값 입력

  var ARR_TEMP = new Array();

  for(var i=0;i<ARR.length;i++){ 

if(ARR[i].year==value){

ARR_TEMP.push(ARR[i].month);

}

}

  var appendMonth="";

  ARR_TEMP.sort();

for(var i=0;i<ARR_TEMP .length;i++){

appendMonth+="<option value='"+ARR_TEMP[i]+"'>"+ARR_TEMP[i]+"</option>";

}

$("#month").empty().append(appendMonth);

}

</script>

==== HTML 부분 ====

<select id="year">

</select>

<select id="month">

</select>

* 정렬 부분이 부족함.. 사용할때 수정해야 할듯

* 중복 제거하는 부분에서 좀더 효율적인 알고리즘이 있지 않을까...

* 이 소스는 year 과 month 두가지로 되어 있으니 사용하시려면 각 키값을 바꿔서 사용하시기 바랍니다.