cari

Rumah >hujung hadapan web >tutorial js >JavaScript melaksanakan kaitan tiga peringkat mudah antara wilayah dan kemahiran javascript_bandar raya

JavaScript melaksanakan kaitan tiga peringkat mudah antara wilayah dan kemahiran javascript_bandar raya

WBOY
WBOYasal
2016-05-16 15:59:021043semak imbas

Apabila kita mendaftarkan laman web, kita akan melihat hubungan tiga peringkat antara wilayah dan majlis perbandaran Berikut adalah pengenalan ringkas 

<!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>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Contoh analisis penggunaan attachEvent dalam kemahiran javascript_javascriptArtikel seterusnya：Contoh analisis penggunaan attachEvent dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi