주소 분류

처음 DB 작업을 하였을 때,

DB에서 xx시 xx구 xx동으로 다 넣었다.

그랬더니 선택을 하였을 경우 처음부터 끝까지 다 나와서

java로 data를 재가공해서 front에 뿌려줬다.

 

 

** back 소스 (java)

		int seqFront = 1;
		int seqMiddle = 1;
		int seqEnd = 1;
		int flag = 0;

		// 시
		for (int i = 1; i < location.size(); i++) {

			String line[] = location.get(i).split(" ");

			// 중복검사
			flag = 0;

			// 시
			for (int j = 0; j < front.size(); j++) {
				if (front.get(j).getLocation().equals(line[0])) {
					flag = 1;
					break;
				}
			}

			if (flag == 0) {
				LocationDTO ldto = new LocationDTO();

				ldto.setSeq(seqFront++);
				ldto.setmLocation(null);
				ldto.setLocation(line[0]);
				front.add(ldto);
			}
		}

		// 구
		for (int i = 1; i < location.size(); i++) {

			String line[] = location.get(i).split(" ");

			flag = 0;
			for (int j = 0; j < middle.size(); j++) {
				if (middle.get(j).getLocation().equals(line[1])) {
					flag = 1;
					break;
				}
			}

			if (flag == 0) {
				LocationDTO ldto = new LocationDTO();

				ldto.setSeq(seqMiddle++);

				for (int j = 0; j < front.size(); j++) {
					if (front.get(j).getLocation().equals(line[0])) {
						ldto.setmLocation(front.get(j).getLocation());
					}
				}
				ldto.setLocation(line[1]);
				middle.add(ldto);
			}
		}
		
		// 동
		for (int i = 1; i < location.size(); i++) {

			String line[] = location.get(i).split(" ");

			flag = 0;
			for (int j = 0; j < end.size(); j++) {
				if (end.get(j).getLocation().equals(line[2])) {
					flag = 1;
					break;
				}
			}

			if (flag == 0) {
				LocationDTO ldto = new LocationDTO();

				ldto.setSeq(seqEnd++);

				for (int j = 0; j < middle.size(); j++) {
					if (middle.get(j).getLocation().equals(line[1])) {
						ldto.setmLocation(middle.get(j).getLocation());
					}
				}
				ldto.setLocation(line[2]);
				end.add(ldto);
			}
		}

 

작동원리는 우선적으로 xx시를 분리한다.

xx시를 분류 한다음, xx구는 자식 seq를 가진다음 부모seq(xx시)를 찾는다. 그렇게 xx구를 분리하고

마지막으로 같은원리로 xx동을 분리한다.

 

 

** front 소스 (JavaScript)

 var midArray = [];
         <c:forEach var="middle" items="${middle}">
            midArray.push({"seq":"${middle.seq}", "mLocation":"${middle.mLocation}", "location":"${middle.location}"});
         </c:forEach>
         
         var endArray = [];
         <c:forEach var="end" items="${end}">
            endArray.push({"seq":"${end.seq}", "mLocation":"${end.mLocation}", "location":"${end.location}"});
         </c:forEach> 
         
         
         $(function() {
            $("#frontsel").change(function(e) {
               var frontsel = $(this).val();
               midCreate(frontsel);
            });
            midCreate($("#frontsel").val());
         });
         
         function midCreate(frontsel) {
            $("#middlesel").children().remove();
            var html = "";
            $(midArray).each(function(i, elem) {
               //console.log(frontsel + " == " + elem.mseq);
               if(frontsel == elem.mLocation) {
                     html += "<option value='" + elem.location + "'>" + elem.location + "</option>";
                  }
               });
            $("#middlesel").html(html);
            endCreate($("#middlesel").val());
         }
         
         $(function() {
            $("#middlesel").change(function(e) {
               var middlesel = $(this).val();
               endCreate(middlesel);
            });
            endCreate($("#middlesel").val());
         });
            
         function endCreate(middlesel) {
            $("#endsel").children().remove();
            var html = "";
            $(endArray).each(function(i, elem) {
               if(middlesel == elem.mLocation) {
                  html += "<option value='" + elem.location + "'>" + elem.location + "</option>";
               }
            });
            $("#endsel").html(html);
         } 
         
      </script>

 

option을 사용해서 선택하게끔 만들었다.

xx시를 클릭하면 그 xx시에 맞게 xx구가 나오고, 그 중 특정한 xx구를 클릭하면 

그 xx구에 맞게끔 xx동이 나온다.