[지역추가] 시도 /구군 두개의 select box 출력하기 > 학습

<select name="sfl" id="sfl" class="txt_05" onchange="itemChange(this.value)">
	<option value="">시/도 선택</option> 
	<option value="서울특별시" title="서울특별시" <?if($_GET['sfl']=="서울특별시"){echo "selected";}?>>서울특별시</option>
	<option value="부산광역시" title="부산광역시" <?if($_GET['sfl']=="부산광역시"){echo "selected";}?>>부산광역시</option>
	<option value="대구광역시" title="대구광역시" <?if($_GET['sfl']=="대구광역시"){echo "selected";}?>>대구광역시</option>
	<option value="인천광역시" title="인천광역시" <?if($_GET['sfl']=="인천광역시"){echo "selected";}?>>인천광역시</option>
	<option value="광주광역시" title="광주광역시" <?if($_GET['sfl']=="광주광역시"){echo "selected";}?>>광주광역시</option>
	<option value="대전광역시" title="대전광역시" <?if($_GET['sfl']=="대전광역시"){echo "selected";}?>>대전광역시</option>
	<option value="울산광역시" title="울산광역시" <?if($_GET['sfl']=="울산광역시"){echo "selected";}?>>울산광역시</option>
	<option value="세종특별자치시" title="세종특별자치시" <?if($_GET['sfl']=="세종특별자치시"){echo "selected";}?>>세종특별자치시</option> 
	<option value="경기도" title="경기도" <?if($_GET['sfl']=="경기도"){echo "selected";}?>>경기도</option>
	<option value="강원도" title="강원도" <?if($_GET['sfl']=="강원도"){echo "selected";}?>>강원도</option>
	<option value="충청북도" title="충청북도" <?if($_GET['sfl']=="충청북도"){echo "selected";}?>>충청북도</option>
	<option value="충청남도" title="충청남도" <?if($_GET['sfl']=="충청남도"){echo "selected";}?>>충청남도</option>
	<option value="전라북도" title="전라북도" <?if($_GET['sfl']=="전라북도"){echo "selected";}?>>전라북도</option>
	<option value="전라남도" title="전라남도" <?if($_GET['sfl']=="전라남도"){echo "selected";}?>>전라남도</option>
	<option value="경상북도" title="경상북도" <?if($_GET['sfl']=="경상북도"){echo "selected";}?>>경상북도</option>
	<option value="경상남도" title="경상남도" <?if($_GET['sfl']=="경상남도"){echo "selected";}?>>경상남도</option>
	<option value="제주특별자치도" title="제주특별자치도" <?if($_GET['sfl']=="제주특별자치도"){echo "selected";}?>>제주특별자치도</option>
</select>

<select name="sfl2" id="sfl2" class="txt_05">
	<option value=""> 선택하세요.
</select>

<script>
	//서울특별시
	var a1=["강남구","강동구","강북구","강서구","관악구","광진구","구로구","금천구","노원구","도봉구","동대문구","동작구","마포구","서대문구","서초구","성동구","성북구","송파구","양천구","영등포구","용산구","은평구","종로구","중구","중랑구"];

	//부산광역시
	var b1=["강서구","금정구","기장군","남구","동구","동래구","부산진구","북구","사상구","사하구","서구","수영구","연제구","영도구","중구","해운대구"];

	//대구광역시
	var c1=["남구","달서구","달성군","동구","북구","서구","수성구","중구"];

	//인천광역시
	var d1=["강화군","계양구","남구","남동구","동구","부평구","서구","연수구","옹진군","중구"];

	//광주광역시
	var e1=["광산구","남구","동구","북구","서구"];

	//대전광역시
	var f1=["대덕구","동구","서구","유성구","중구"];

	//울산광역시
	var g1=["남구","동구","북구","울주군","중구"];

	//세종특별자치시
	var h1=["세종특별자치시"];

	//경기도
	var i1=["가평군","고양시 덕양구","고양시 일산동구","고양시 일산서구","과천시","광명시","광주시","구리시","군포시","김포시","남양주시","동두천시","부천시","성남시 분당구","성남시 수정구","성남시 중원구","수원시 권선구","수원시 영통구","수원시 장안구","수원시 팔달구","시흥시","안산시 단원구","안산시 상록구","안성시","안양시 동안구","안양시 만안구","양주시","양평군","여주시","연천군","오산시","용인시 기흥구","용인시 수지구","용인시 처인구","의왕시","의정부시","이천시","파주시","평택시","포천시","하남시","화성시"];

	//강원도
	var j1=["강릉시","고성군","동해시","삼척시","속초시","양구군","양양군","영월군","원주시","인제군","정선군","철원군","춘천시","태백시","평창군","홍천군","화천군","횡성군"];

	//충청북도
	var k1=["괴산군","단양군","보은군","영동군","옥천군","음성군","제천시","증평군","진천군","청주시상당구","청주시서원구","청주시청원구","청주시흥덕구","충주시"];

	//충청남도
	var l1=["계룡시","공주시","금산군","논산시","당진시","보령시","부여군","서산시","서천군","아산시","예산군","천안시동남구","천안시서북구","청양군","태안군","홍성군"];

	//전라북도
	var m1=["고창군","군산시","김제시","남원시","무주군","부안군","순창군","완주군","익산시","임실군","장수군","전주시덕진구","전주시완산구","정읍시","진안군"];

	//전라남도
	var n1=["강진군","고흥군","곡성군","광양시","구례군","나주시","담양군","목포시","무안군","보성군","순천시","신안군","여수시","영광군","영암군","완도군","장성군","장흥군","진도군","함평군","해남군","화순군"];

	//경상북도
	var o1=["경산시","경주시","고령군","구미시","군위군","김천시","문경시","봉화군","상주시","성주군","안동시","영덕군","영양군","영주시","영천시","예천군","울릉군","울진군","의성군","청도군","청송군","칠곡군","포항시남구","포항시북구"];

	//경상남도
	var p1=["거제시","거창군","고성군","김해시","남해군","밀양시","사천시","산청군","양산시","의령군","진주시","창녕군","창원시 마산합포구","창원시 마산회원구","창원시 성산구","창원시 의창구","창원시 진해구","통영시","하동군","함안군","함양군","합천군"];

	//제주특별자치도
	var q1=["서귀포시","제주시"];

	function itemChange(arr01){
		removeOption();
		if(arr01=="서울특별시"){
			addOption(a1);
		}else if(arr01=="부산광역시"){
			addOption(b1);
		}else if(arr01=="대구광역시"){
			addOption(c1);
		}else if(arr01=="인천광역시"){
			addOption(d1);
		}else if(arr01=="광주광역시"){
			addOption(e1);
		}else if(arr01=="대전광역시"){
			addOption(f1);
		}else if(arr01=="울산광역시"){
			addOption(g1);
		}else if(arr01=="세종특별자치시"){
			addOption(h1);
		}else if(arr01=="경기도"){
			addOption(i1);
		}else if(arr01=="강원도"){
			addOption(j1);
		}else if(arr01=="충청북도"){
			addOption(k1);
		}else if(arr01=="충청남도"){
			addOption(l1);
		}else if(arr01=="전라북도"){
			addOption(m1);
		}else if(arr01=="전라남도"){
			addOption(n1);
		}else if(arr01=="경상북도"){
			addOption(o1);
		}else if(arr01=="경상남도"){
			addOption(p1);
		}else if(arr01=="제주특별자치도"){
			addOption(q1);
		}
							
	
	}
	function removeOption(){
	  var objSel = document.getElementById("sfl2");

	  for(i=objSel.length; i>=0; i--){
		objSel.options[i]=null;
	  }
	}

	function addOption(bbb){
	  var objSel = document.getElementById("sfl2");
	  for (i=0; i<bbb.length;i++){
		  var objOption = document.createElement("option");  
		  if(i==0){
			objOption.text = '선택해주세요.' ;
			objOption.value = '';
		  }else{
			objOption.text = bbb[i] ;
			objOption.value = bbb[i];
		  }
		objSel.options.add(objOption);
	  }
	}

</script>