search

Home  >  Article  >  Web Front-end  >  JavaScript implements simple three-level linkage between provinces and municipalities_javascript skills

JavaScript implements simple three-level linkage between provinces and municipalities_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:59:021034browse

When we register a website, we will see the three-level linkage between provinces and municipalities. Here is a brief introduction 

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus&reg;">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 </head>
 <body>
<select id="province" onChange="ck()" >
    <option>--请选择--</option>
   </select>
   <select id="city"> 
    <option>--请选择--</option>
   </select>
   <select id="san">
    <option>--请选择--</option>
   </select>
 </body>
 <script type="text/javascript">
 //======================================第一种方法：获取省市二级联菜单=============================
 //获取省的id
 var prame= document.getElementById("province");
 var city= document.getElementById("city");
var san= document.getElementById("san");
 //创建省市数组
 var cityList=new Array();
   //创建另一个数组
  var zushu=new Array;
   cityList['江西省'] = ['南昌市','抚州市','上饶市','鹰潭市','丰城市','吉安市'];
   cityList['河南省'] = ['郑州市','洛阳市'];
   cityList['湖北省'] = ['武汉市','宜昌市'];
   cityList['福建省'] = ['福州市','三明市','佛山市'];
   zushu['南昌市']=['南昌县','青云谱区','莲塘镇'];
   zushu['抚州市']=['临川区','云山镇','唱凯镇'];
   for(var i in cityList){
    prame.add(new Option(i,i),null);
   }
    prame.onchange=function(){
    var prame= document.getElementById("province").value;
    var city= document.getElementById("city");
    
    city.options.length=0;
    for(var k in cityList[prame]){
       city.add(new Option(cityList[prame][k],cityList[prame][k]),null);
  }
 }
 city.onchange=function(){
   var city= document.getElementById("city").value;
    var san= document.getElementById("san");
    
    san.options.length=0;
    for(var k in zushu[city]){
       san.add(new Option(zushu[city][k]),(zushu[city][k]),null);
  }
 }
</script>
 <!--------------------------------第二种方法：三级联动菜单----------------------
 <script type="text/javascript">
 
        //获取省的id
     var province=document.getElementById("province");
       province.add(new Option("江西省","江西省"),null);
       province.add(new Option("福建省","福建省"),null);
      province.add(new Option("广东省","广东省"),null);
     function ck(){
        
       var city=document.getElementById("city");
        var num=province.selectedIndex;
        city.options.length=0;
  
    switch(num){
      case 1:
       city.add(new Option("南昌市","南昌市"),null);
       city.add(new Option("抚州市","抚州市"),null);
     city.add(new Option("上饶市","上饶市"),null);
       city.add(new Option("吉安市","吉安市"),null);
       break;
       
      case 2:
       city.add(new Option("厦门市","厦门市"),null);
       city.add(new Option("三明市","三明市"),null);
     city.add(new Option("莆田市","莆田市"),null);
       city.add(new Option("龙岩市","龙岩市"),null);
       break;
     
      case 3:
       city.add(new Option("广州市","广州市"),null);
       city.add(new Option("东莞市","东莞市"),null);
     city.add(new Option("保定市","保定市"),null);
       city.add(new Option("珠海市","珠海市"),null);
       break;
        } 
      
      var qu=document.getElementById("qu");
      var num1=province.selectedIndex;
      qu.options.length=0;
      switch(num1){
      case 1:
       qu.add(new Option("临川区","临川区"),null);
       qu.add(new Option("青云谱区","青云谱区"),null);
     qu.add(new Option("南昌镇","南昌镇"),null);
       qu.add(new Option("云山镇","云山镇"),null);
       break;
       
      case 2:
      qu.add(new Option("保安县","保安县"),null);
      qu.add(new Option("福田区","福田区"),null);
     qu.add(new Option("将乐县","将乐县"),null);
      qu.add(new Option("厦门区","厦门区"),null);
       break;
     
     case 3:
      qu.add(new Option("广上县","光上县"),null);
      qu.add(new Option("西莞区","西莞区"),null);
     qu.add(new Option("三海县","三海县"),null);
      qu.add(new Option("广岛区","广岛区"),null);
       break;
        } 
   } 
 </script>-->
</html>

The above is the entire content of this article, I hope you all like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example analysis of attachEvent usage in javascript_javascript skillsNext article：Example analysis of attachEvent usage in javascript_javascript skills

Related articles

See more