快捷導(dǎo)航

js編寫三級聯(lián)動簡單案例

更新時間：2016年12月21日 11:21:54 作者：周夢順

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

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

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

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

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

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

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

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

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

  //需要注意的是如果后臺傳來的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(){ 
   //請求出錯處理 
   } 
  }); 
 ｝
</script>

<body>
 <select id="gj">
  <option>請選擇</option>
 </select>
 <select id="sf">
  <option>請選擇</option>
 </select>
 <select id="sj">
  <option>請選擇</option>
 </select>
</body>
</html>

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

您可能感興趣的文章: