js编写三级联动简单案例

2019-11-19 18:21:43

字体：大中小

来源：转载

供稿：网友

刚给学妹写了个简单的地区的三级联动简单案例，分享给正在学习的朋友参考下

<html> <head> <!--导入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','省份');//查询当前国家下的所有省份，并加载到省份下拉框中  }  $("#sf").change(function(){//省份的值改变事件   loaddata('sj','省份的请求url','省份id'，'市级');//查询当前省份下的所有市，并加载到市下拉框中  } }); //数据加载 function loaddata(eleid,url,id,type){  $.ajax({    type:'get',    url:url,    data:{id:id}//参数   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数据不一致，需先转换再遍历   for(var i=0;i<data.length;i++){//再加载数据     $("#"+eleid).append('<option value="'+data.选择的值+'">'+data.显示的值+'</option>');//加载数据   }   },error:function(){    //请求出错处理    }   });  ｝</script><body> <select id="gj">  <option>请选择</option> </select> <select id="sf">  <option>请选择</option> </select> <select id="sj">  <option>请选择</option> </select></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS实现仿PS的调色板效果完整实例

下一篇：jQuery实现立体式数字动态增加（animate方法）