json이용한 주소 값 쓰기

각 항목이 선택됐을때 저장을하고

어떤것이 선택됐는지 카운트를 올림

뒤로가기 버튼을 클릭했을때

마지막에 입력한 문자열을 삭제하고

선택된 카운트도 하나씩 내림

입력된 문자열의 값은 히든으로 저장

주소를 json으로 받아와서

일치하는 항목이 있으면 뿌려줌

<script type="text/javascript" src="jquery-1.12.0.js"></script>

<script type="text/javascript">

var resultC = 0;

var resultL = 0;

// 선택할때

function chk( value ){

var ccc = $('input[name=result]').val();

if (value == 'c') resultC += 1;

ccc += value;

$('input[name=result]').val( ccc );

}

// 삭제할때

function ddel(){

var ccc = $('input[name=result]').val();

var a = ccc.substr(0, ccc.length -1);

$('input[name=result]').val( a );

ccc = ccc.substr(ccc.length -1, ccc.length);

if(ccc == 'c') resultC -= 1;

}

/*** 주소 처리 ***/

// 제이슨으로 주소데이터 받아오기

var jsonData = "";

$(document).ready(function() {

jsonData = $.ajax({

       url:"kor_district.json",

dataType:"JSON",

async : false

}).responseText;

});

// 입력값에 따라 데이터 변경

function selectCore( value ){

var obj = JSON.parse(jsonData);

for(key in obj) {

if( key == value){ // 입력값이랑 같으면 들어옴

var temp = obj[key];

$("select[id=district]").empty();         // 안에내용 삭제

var district = "<option>읍/면/동</option>";

$("select[id=district]").append(district)

  for( var i=0; i<temp.length; i++){ // json의 내용 써주기

district = "<option value='"+temp[i]+"'>" + temp[i]  +"</option>";

$("select[id=district]").append(district);

} 

}

}

}

</script>

<form>

<input type="hidden" name="result" value="">

<input type="hidden" name="district1" value="">

<table>

<tr>

<td>

C선택 <input type="radio" name="1" value="c" onclick="chk('c')">

L선택 <input type="radio" name="1" value="l" onclick="chk('l')">

</td>

<tr>

<td>

C선택 <input type="radio" name="2" value="c" onclick="chk('c')">

L선택 <input type="radio" name="2" value="l" onclick="chk('l')">

<button onclick="ddel()">이전</button>

</td>

</tr>

<tr>

<td>

C선택 <input type="radio" name="3" value="c" onclick="chk('c')">

L선택 <input type="radio" name="3" value="l" onclick="chk('l')">

<button onclick="ddel()">이전</button>

</td>

</tr>

<tr>

<td>

<select name="prefecture" onchange="selectCore(this.value)">

 <option value="">시/도</option>

              <option value="서울특별시">서울특별시</option>

              <option value="부산광역시">부산광역시</option>      

              <option value="인천광역시">인천광역시</option>

              <option value="대구광역시">대전광역시</option>

               <option value="대구광역시">대구광역시</option>

              <option value="광주광역시">광주광역시</option>

              <option value="울산광역시">울산광역시</option>

              <option value="세종특별자치시">세종특별자치시</option>

              <option value="경기도">경기도</option>

              <option value="강원도">강원도</option>

              <option value="충청북도">충청북도</option>

              <option value="충청남도">충청남도</option>

              <option value="경상북도">경상북도</option>

              <option value="경상남도">경상남도</option>

              <option value="전라북도">전라북도</option>

              <option value="전라남도">전라남도</option>

              <option value="제주특별자치도">제주특별자치도</option>

           </select> 

<select id="district">

<option>읍/면/동</option>

</select>

            </td>

</tr>

</table>

</form>

참고 블로그

http://gent.tistory.com/17