jQuery下的ajax 三级联动

来源：互联网发布：淘宝海报怎么放编辑：程序博客网时间：2024/05/19 11:18
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script><script type="text/javascript">/* *懒：不写重复的代码   优化思路： 1 抽取相同的代码，封装到方法 2 将变化的数据，作为方法的参数 */$(function(){var pro = $("#province");var city = $("#city");var area = $("#area");//加载省$.get("/m.jquery1/getData?pid=0",function(data){$(data).each(function(){var str = '<option value="'+this.id+'">'+this.name+'</option>';pro.append($(str));});},"json");//通过点击省  加载市pro.change(function(){//清空city.prop("length",1);area.prop("length",1);$.get("/m.jquery1/getData?pid="+this.value,function(data){$(data).each(function(){var str = '<option value="'+this.id+'">'+this.name+'</option>';city.append($(str));});},"json");});//通过点击市  加载区city.change(function(){area.prop("length",1);$.get("/m.jquery1/getData?pid="+this.value,function(data){$(data).each(function(){var str = '<option value="'+this.id+'">'+this.name+'</option>';area.append($(str));});},"json");});});</script>


                                                                                                                        
更新一:
function loaddata(value,ele){$.get("/m.jquery1/getData?pid="+value,function(data){$(data).each(function(){var str = '<option value="'+this.id+'">'+this.name+'</option>';ele.append($(str));});},"json");}$(function(){var pro = $("#province");var city = $("#city");var area = $("#area");//加载省loaddata(0,pro);//通过点击省  加载市pro.change(function(){//清空city.prop("length",1);area.prop("length",1);loaddata(this.value,city);});//通过点击市  加载区city.change(function(){area.prop("length",1);loaddata(this.value,area);});});</script>



最终更新:
function loaddata(value,ele){$.get("/m.jquery1/getData?pid="+value,function(data){$(data).each(function(){ele.append($('<option value="'+this.id+'">'+this.name+'</option>'));});},"json");}$(function(){var pro = $("#province");loaddata(0,pro);$("#province,#city").change(function(){$(this).nextAll().prop("length",1);loaddata(this.value,$(this).next());});});
阅读全文
0 0