快捷導(dǎo)航

js編寫三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例

更新時(shí)間：2016年12月21日 11:21:54 作者：周夢(mèng)順

這篇文章主要為大家分享了JavaScript編寫三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

剛給學(xué)妹寫了個(gè)簡(jiǎn)單的地區(qū)的三級(jí)聯(lián)動(dòng)簡(jiǎn)單案例，分享給正在學(xué)習(xí)的朋友參考下

<html>
 <head>
 <!--導(dǎo)入jquery-->
 <script type="text/javascript"src="jquery1.7.1.js"></script>
 </head>
<script type="text/javascript">
 $(function(){//頁(yè)面加載
  loaddata('gj','國(guó)家的請(qǐng)求url','查所有id隨便給反正后臺(tái)不需要'，'省份'，'國(guó)家');//查詢所有國(guó)家，并加載到國(guó)家下拉框中

  $("#gj").change(function(){//國(guó)家的值改變事件
   loaddata('sf','省份的請(qǐng)求url','國(guó)家id','省份');//查詢當(dāng)前國(guó)家下的所有省份，并加載到省份下拉框中
  }

  $("#sf").change(function(){//省份的值改變事件
   loaddata('sj','省份的請(qǐng)求url','省份id'，'市級(jí)');//查詢當(dāng)前省份下的所有市，并加載到市下拉框中
  }
 });
 //數(shù)據(jù)加載
 function loaddata(eleid,url,id,type){
  $.ajax({ 
   type:'get', 
   url:url, 
   data:{id:id}//參數(shù)
   success:function(data){ 
    if(type=='國(guó)家')｛//如果是國(guó)家

     $("#"+eleid).html("");//先清空國(guó)家
     $("#sf").html("");//再清空省份
     $("#sj").html("");//最后清空市
    ｝else if(type=='省份'){//如果是省

     $("#"+eleid).html("");//先清空省份
     $("#sj").html("");//再后清空市

    }else if(type=='市級(jí)'){//如果是市級(jí)

     $("#"+eleid).html("");//清空市
    }
   $("#"+eleid).append('<option>請(qǐng)選擇</option>');

  //需要注意的是如果后臺(tái)傳來(lái)的data數(shù)據(jù)不一致，需先轉(zhuǎn)換再遍歷
   for(var i=0;i<data.length;i++){//再加載數(shù)據(jù)
     $("#"+eleid).append('<option value="'+data.選擇的值+'">'+data.顯示的值+'</option>');//加載數(shù)據(jù)
   }
   },error:function(){ 
   //請(qǐng)求出錯(cuò)處理 
   } 
  }); 
 ｝
</script>

<body>
 <select id="gj">
  <option>請(qǐng)選擇</option>
 </select>
 <select id="sf">
  <option>請(qǐng)選擇</option>
 </select>
 <select id="sj">
  <option>請(qǐng)選擇</option>
 </select>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: