三级城市联动菜单

三级城市联动菜单，也可以实现无限级联动，没有下限、、、

废话不多说，直接上代码。

<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这层处理。