省市县联动

< 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 >
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值