Javascirpt 성, 시 지역 select 목록, JSon 저장 실현

3156 단어 javascirpt
최근 에 코드 를 재 구성 할 때 성 시 급 련 의 처리 에 있어 ajax 요청 으로 이 루어 졌 습 니 다. 데이터 베 이 스 를 자주 조작 하 는 것 에 대해 아마 존의 페이지 에 이런 성 시내 형식의 JSon 데이터 가 있 는 것 을 보고 자신 도 한번 해 보고 싶 었 습 니 다.백 스테이지 시내 의 업 데 이 트 를 감청 하고 제 이 슨 형식 데 이 터 를 다시 생 성 할 지 여 부 는 아직 시험 하지 않 았 다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <select id="provinces">
	<option value="">   </option>
  </select>
  <select id="cites">
	<option value="">   </option>
  </select>
 </body>
 <script type="text/javascript">
  
  var oProvinceSelect=document.getElementById("provinces");
  var oCitySelect=document.getElementById("cites");
  var oOption;//	option  
  var oCities;//	      
  var nCitiesLength;//       
  var area=[{"num":"11","name":"  ","children":[{"num":"02","name":"  "},{"num":"03","name":"  "},{"num":"05","name":"  "},{"num":"08","name":"  "},{"num":"12","name":"  "},{"num":"13","name":"  "},{"num":"14","name":"  "},{"num":"15","name":"  "},{"num":"17","name":"  "},{"num":"18","name":"  "},{"num":"20","name":"  "},{"num":"28","name":"  "},{"num":"29","name":"   "}]},{"num":"4A","name":"  ","children":[{"num":"03","name":"  "}]}];


	/*	province_select   	*/

	for(var i=0;i<area.length;i++){
		oOption=document.createElement('option');
		oOption.text=area[i].name;
		oOption.value=area[i].num;
		oProvinceSelect.add(oOption,null);
	}

	oProvinceSelect.onchange=function(){
		nCitiesLength=oCitySelect.length;
		for(var z=1;z<nCitiesLength;z++){
			oCitySelect.remove(1);
		}
		for(var j=0;j<area.length;j++){
			if(area[j].num==oProvinceSelect.value){
				oCities=area[j].children;	
					for(var k=0;k<oCities.length;k++){
						oOption=document.createElement('option');
						oOption.text=oCities[k].name;
						oOption.value=oCities[k].num;
						oCitySelect.add(oOption,null);
					}
			}
		}
	 }
 </script>
</html>



좋은 웹페이지 즐겨찾기