三级城市联动菜单,也可以实现无限级联动,没有下限、、、
废话不多说,直接上代码。
<select name="provinceid" id="provinceid" onchange="change_city($(this))" data-target="cityid"> <option>请选择全国省份</option> </select> <select name="cityid" id="cityid" onchange="change_city($(this))" data-target="three_cityid"> <option>...</option> </select> <select name="three_cityid" id="three_cityid"> <option>...</option> </select>
data-target这边是个关键,对应下级需要更改的对象ID。
function change_city($this){ var nextObjectId = $this.attr(‘data-target‘); if (nextObjectId != undefined){ $.get(ajaxUrl,{id:$this.val()},function(data){ $("#"+nextObjectId).html(data); change_city($("#"+nextObjectId)); }); } }
这边其实就是一个递归,没什么技术含量
这边可能会有性能上的一些影响。如果纠结这个,可以把ajax请求在js这层处理。
原文:http://www.cnblogs.com/fengchi/p/5087207.html