Underscore.js를 이용한 간단한 콤보 박스 예제

Underscore 문법을 이용하여 간단한 콤보 박스를 구현하였습니다.

다음과 같은 데이터를 이용하여

var data = [
{"Continent" : "아시아" , "Country":"대한민국", "Code":"KOR"},
{"Continent" : "아시아" , "Country":"중국" , "Code":"CHN"},
{"Continent" : "아시아" , "Country":"베트남" , "Code":"VNM"},
{"Continent" : "북미" , "Country":"미국" , "Code":"USA"},
{"Continent" : "북미" , "Country":"캐나다" , "Code":"CAN"},
{"Continent" : "유럽" , "Country":"영국" , "Code":"GBR"},
{"Continent" : "유럽" , "Country":"프랑스" , "Code":"FRA"},
{"Continent" : "유럽" , "Country":"독일" , "Code":"DEU"}
]

아래와 같이 대륙, 국가 콤보박스 2개를 표현하였습니다.

Continent 정보의 중복을 제외한 값인 '아시아/북미/유럽'을 ①대륙 콤보 박스에 표현하고요

대륙을 선택하면 해당하는 국가를 조회하여 ②에 표현하는 간단한 예제입니다.

① 중복 없는 Continent값을 가져오기 위해 Underscore의 _keys와 _.countBy를 이용하였고요

// 대륙 리스트
var continentList = _.keys(_.countBy(data, function(data) { return data.Continent; }));

② 선택된 Continent에 해당하는 국가 리스트 _.where를 이용하여 조회 필터링하였습니다.

// 선택한 Continent 정보
var txtContinent = $("#Continent option:Selected").text();
// Continent에 해당하는 국가정보 리스트
var conturyList = _.where(data, {"Continent":txtContinent})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Underscore Include-->
<script src="underscore.js"></script>

<script>
$(document).ready(function(){
  var data = [
  {"Continent" : "아시아" , "Country":"대한민국" , "Code":"KOR"},
  {"Continent" : "아시아" , "Country":"중국"			, "Code":"CHN"},
  {"Continent" : "아시아" , "Country":"베트남"	 , "Code":"VNM"},
  {"Continent" : "북미"		, "Country":"미국"	   , "Code":"USA"},
  {"Continent" : "북미"		, "Country":"캐나다"	  , "Code":"CAN"},
  {"Continent" : "유럽"		, "Country":"영국"	   , "Code":"GBR"},
  {"Continent" : "유럽"		, "Country":"프랑스"	  , "Code":"FRA"},
  {"Continent" : "유럽"		, "Country":"독일"	   , "Code":"DEU"}
  ]

  // 대륙 리스트
  var continentList = _.keys(_.countBy(data, function(data) { return data.Continent; }));
  $("#Continent").find('option').remove();
  $("#Continent").append('<option value=""> == 선택 ==</option>');
  $.each(continentList, function (idx, item) {
    $("#Continent").append('<option value="'+item+'">'+item+'</option>');
  })

  // Continent ComboBox Change Event
  $("#Continent").change(function(){
    var txtContinent = $("#Continent option:Selected").text();
    var conturyList = _.where(data, {"Continent":txtContinent})

    $("#Contury").find('option').remove();
    $.each(conturyList, function (idx, item) {
    $("#Contury").append('<option value="'+item.Code+'">'+item.Country+'</option>');
  })
});


});
</script>
</head>
<body>
대륙 : <select id="Continent" style="width:100px"></select>
국가 : <select id="Contury" style="width:100px"></select><br><br>
<!-- <button type="button" id="btn-continent">대륙</button> -->
</body>
</html>

실행화면

소스파일 첨부합니다.

Sample_Combo_Underscore.zip

0.02MB

감사합니다.