省市县联动（转）

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < script  type ="text/javascript" >
     // 示例数据，数据的不同，获取数据的方法是不同的
       var  data  =  {  " 浙江省 " : {  " 湖州市 " : [ " 德清县 " , " 长兴县 " , " 安吉县 " , " 吴兴区 " , " 南浔区 " ],  " 杭州市 " : [ " 上城区 " ,  " 下城区 " ,  " 西湖区 " ] },
                    " 河南省 " : { " 洛阳市 " :[ " 孟津县 " , " 新安县 " , " 栾川县 " ], " 新乡市 " :[ " 新乡县 " , " 获嘉县 " , " 长垣县 " , " 封丘县 " ], " 周口市 " :[ " 鹿邑县 " , " 太康县 " , " 郸城县 " , " 淮阳县 " ]},
                    " 北京市 " : { " 北京市 " :[ " 昌平区 " , " 海淀区 " , " 怀柔县 " , " 延庆县 " ]}
                      };

    window.onload  =   function  () {
       // 填充省数据
       for  (p  in  data) {
         var  sheng  =  document.getElementById( " province " );
        sheng.options[sheng.options.length]  =   new  Option(p, p);
      }
      setCity()
    }

     function  setCity()
    {
       var  sheng  =  document.getElementById( " province " );
       var  shi  =  document.getElementById( " city " );
      shi.options.length  =   0 ;
       var  selected_sheng  =  sheng.options[sheng.selectedIndex].value;
       for  (c  in  data[selected_sheng]) {
        
        shi.options[shi.options.length]  =   new  Option(c, c);
      }
      setCountry()
    }
     function  setCountry() {
       var  sheng  =  document.getElementById( " province " );
       var  shi  =  document.getElementById( " city " );
       var  xian  =  document.getElementById( " country " );
       var  selected_sheng  =  sheng.options[sheng.selectedIndex].value;
       var  selected_shi  =  shi.options[shi.selectedIndex].value;
       var  xianArray  =  data[selected_sheng][selected_shi];
      xian.options.length  =   0 ;
       for  (i  =   0 ; i  <  xianArray.length;i ++  ) {
        xian.options[xian.options.length]  =   new  Option(xianArray[i], xianArray[i]);
      }
    }
     </ script >
</ head >
< body >
     < form >
    选择省： < select  id ="province"  onchange ="setCity()" ></ select >
    选择市： < select  id ="city"  onchange ="setCountry()" ></ select >
    选择区县： < select  id ="country" ></ select >
     </ form >
</ body >
</ html >

转载于:https://www.cnblogs.com/Fskjb/archive/2012/05/13/2498520.html