js中省市级联的实现

 
 

  
  <!
  
  DOCTYPE 
  
  html 
  
  PUBLIC 
  
  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  
  >
 
 
 
 

  
  <
  
  html 
  
  xmlns
  
  =
  
  "http://www.w3.org/1999/xhtml"
  
  >
 
 
 
 

  
  <
  
  head
  
  >
 
 
 
 

  
  <
  
  meta 
  
  http
  
  -
  
  equiv
  
  =
  
  "Content-Type" 
  
  content
  
  =
  
  "text/html; charset=gb2312" 
  
  />
 
 
 
 

  
  <
  
  title
  
  >
  
  无标题文档
  
  <
  
  /title>
 
 
 
 

  
  <
  
  script 
  
  language
  
  =
  
  "javascript"
  
  >
 
 
 
 

  
  countries
  
  =
  
  [
  
  "中国"
  
  ,
  
  "美国"
  
  ,
  
  "英国"
  
  ];
 
 
 
 

  
  //中国省、直辖市
 
 
 
 

  
  countries
  
  [
  
  "中国"
  
  ]
  
  =
  
  [
  
  '北京'
  
  , 
  
  '上海'
  
  , 
  
  '重庆'
  
  , 
  
  '广东'
  
  , 
  
  '湖北'
  
  , 
  
  '浙江'
  
  ,
  
  '湖南'
  
  ,
  
  '新疆'
  
  ,
  
  '西藏'
  
  ];
 
 
 
 

  
  //美国
 
 
 
 

  
  countries
  
  [
  
  "美国"
  
  ]
  
  =
  
  [
  
  '华盛顿'
  
  , 
  
  '纽约'
  
  , 
  
  '拉斯维加斯'
  
  , 
  
  '底特律'
  
  , 
  
  '夏威夷'
  
  , 
  
  '洛杉矶'
  
  , 
  
  '丹佛'
  
  , 
  
  '休斯敦'
  
  ];
 
 
 
 

  
  //英国
 
 
 
 

  
  countries
  
  [
  
  "英国"
  
  ]
  
  =
  
  [
  
  '伦敦'
  
  , 
  
  '曼彻斯特'
  
  , 
  
  '利兹'
  
  , 
  
  '纽卡斯尔'
  
  , 
  
  '伯明翰'
  
  ];
 
 
 
 


 
 
 
 

  
  //广东省下的市
 
 
 
 

  
  countries
  
  [
  
  "中国"
  
  ][
  
  "广东"
  
  ]
  
  =
  
  [
  
  '广州'
  
  ,
  
  '东莞'
  
  ,
  
  '惠州'
  
  ];
 
 
 
 

  
  //湖北省下的市
 
 
 
 

  
  countries
  
  [
  
  "中国"
  
  ][
  
  "湖北"
  
  ]
  
  =
  
  [
  
  '鄂州'
  
  ,
  
  '宜昌'
  
  ,
  
  '武汉'
  
  ,
  
  '荆州'
  
  ,
  
  '荆门'
  
  ,
  
  '黄石'
  
  ,
  
  '襄樊'
  
  ];
 
 
 
 

  
  //浙江省下的市
 
 
 
 

  
  countries
  
  [
  
  "中国"
  
  ][
  
  "浙江"
  
  ]
  
  =
  
  [
  
  '杭州'
  
  ,
  
  '温州'
  
  ,
  
  '金华'
  
  ,
  
  '义乌'
  
  ,
  
  '宁波'
  
  ];
 
 
 
 

  
  //湖南省下的市
 
 
 
 

  
  countries
  
  [
  
  "中国"
  
  ][
  
  "湖南"
  
  ]
  
  =
  
  [
  
  '岳阳'
  
  ,
  
  '湘潭'
  
  ,
  
  '长沙'
  
  ];
 
 
 
 


 
 
 
 

  
  function 
  
  show_p
  
  (
  
  thisCountry
  
  )
 
 
 
 

  
  {
 
 
 
 
	
  
  document
  
  .
  
  getElementById
  
  (
  
  "city"
  
  ).
  
  innerHTML
  
  =
  
  ""
  
  ;
 
 
 
 
	
  
  document
  
  .
  
  getElementById
  
  (
  
  "province"
  
  ).
  
  innerHTML
  
  =
  
  ""
  
  ;
 
 
 
 
	
  
  if
  
  (
  
  thisCountry
  
  !=
  
  ""
  
  )
 
 
 
 
	
  
  {
 
 
 
 
		
  
  var 
  
  p
  
  =
  
  ""
  
  ;
 
 
 
 
		
  
  for
  
  (
  
  i
  
  =
  
  0
  
  ;
  
  i
  
  <
  
  countries
  
  [
  
  thisCountry
  
  ].
  
  length
  
  ;
  
  i
  
  ++
  
  )
 
 
 
 
		
  
  {
 
 
 
 
			
  
  p
  
  +=
  
  "<option value='"
  
  +
  
  countries
  
  [
  
  thisCountry
  
  ][
  
  i
  
  ]
  
  +
  
  "'>"
  
  +
  
  countries
  
  [
  
  thisCountry
  
  ][
  
  i
  
  ]
  
  +
  
  "</option>"
  
  ;
 
 
 
 
		
  
  }
 
 
 
 
		
 
 
 
 
		
  
  document
  
  .
  
  getElementById
  
  (
  
  "province"
  
  ).
  
  innerHTML
  
  =
  
  "<select οnchange=showC('"
  
  +
  
  thisCountry
  
  +
  
  "',this.value)>"
  
  +
  
  p
  
  +
  
  "</select>"
  
  ;
 
 
 
 
	
  
  }
 
 
 
 
	
  
  else
 
 
 
 
		
  
  document
  
  .
  
  getElementById
  
  (
  
  "province"
  
  ).
  
  innerHTML
  
  =
  
  ""
  
  ;
 
 
 
 

  
  }
 
 
 
 


 
 
 
 

  
  function 
  
  showC
  
  (
  
  thisCountry
  
  ,
  
  thisP
  
  )
 
 
 
 

  
  {
 
 
 
 
	
  
  document
  
  .
  
  getElementById
  
  (
  
  "city"
  
  ).
  
  innerHTML
  
  =
  
  ""
  
  ;
 
 
 
 
	
  
  var 
  
  c
  
  =
  
  ""
  
  ;
 
 
 
 
	
  
  for
  
  (
  
  i
  
  =
  
  0
  
  ;
  
  i
  
  <
  
  countries
  
  [
  
  thisCountry
  
  ][
  
  thisP
  
  ].
  
  length
  
  ;
  
  i
  
  ++
  
  )
 
 
 
 
	
  
  {
 
 
 
 
		
  
  c
  
  +=
  
  "<option>"
  
  +
  
  countries
  
  [
  
  thisCountry
  
  ][
  
  thisP
  
  ][
  
  i
  
  ]
  
  +
  
  "</option>"
  
  ;
 
 
 
 
	
  
  }
 
 
 
 
	
 
 
 
 
	
  
  document
  
  .
  
  getElementById
  
  (
  
  "city"
  
  ).
  
  innerHTML
  
  =
  
  "<select>"
  
  +
  
  c
  
  +
  
  "</select>"
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  <
  
  /script>
 
 
 
 

  
  <
  
  /head>
 
 
 
 


 
 
 
 

  
  <
  
  body
  
  >
 
 
 
 

  
  请选择国家：
 
 
 
 

  
  <
  
  select 
  
  id
  
  =
  
  "country" 
  
  onchange
  
  =
  
  "show_p(this.value)"
  
  >
 
 
 
 
	
  
  <
  
  option 
  
  value
  
  =
  
  ""
  
  >
  
  请选择国家
  
  <
  
  /option>
 
 
 
 
	
  
  <
  
  script 
  
  language
  
  =
  
  "javascript"
  
  >
 
 
 
 
		
  
  for
  
  (
  
  i
  
  =
  
  0
  
  ;
  
  i
  
  <
  
  countries
  
  .
  
  length
  
  ;
  
  i
  
  ++
  
  )
 
 
 
 
		
  
  document
  
  .
  
  write
  
  (
  
  "<option value='"
  
  +
  
  countries
  
  [
  
  i
  
  ]
  
  +
  
  "'>"
  
  +
  
  countries
  
  [
  
  i
  
  ]
  
  +
  
  "</option>"
  
  );
 
 
 
 
	
  
  <
  
  /script>
 
 
 
 

  
  <
  
  /select>
 
 
 
 

  
  <
  
  span 
  
  id
  
  =
  
  "province"
  
  ><
  
  /span>
 
 
 
 

  
  <
  
  span 
  
  id
  
  =
  
  "city"
  
  ><
  
  /span>
 
 
 
 

  
  <
  
  /body>
 
 
 
 

  
  <
  
  /html>