js编写三级联动简单案例

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

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

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