无限级二级菜单,愈来愈多的被应用,譬如省级->市级的二级菜单 jquery
思路:一级下拉列表select 绑定一个id, jqury获取到该下拉列表的checked属性值,经过ajax请求获取到该值所对应的二级内容,而后jquery修改二级下拉列表的内容,便可实现动态生成二级联动下拉列表 ajax
示例: json
下拉列表 app
<td width="40%">一级分类
<select id="head_one">
<option value="-1">所有</option>
<volist name="ones" id="val">
<option value="{$val.id}">{$val.cname}</option>
</volist>
</select>
</td>
<td width="40%">二级分类
<select id="head_two">
<option value="-1">所有</option>
</select>
</td> post
jqury post获取 url
$("#head_one").change(function(){
var parentId = $("#head_one").val();
if(parentId == -1)
return false;
$.ajax({
url : '{:U("Info/checkTwoCategory")}',
type : 'POST',
data : {
'parentId' : parentId,
},
dataType : 'json',
error:function()
{
alert('Error loading data!');
},
success:function(msg)
{
$("#head_two").empty();
$.each(eval(msg), function(i, item) {
$("<option value='" + item.id + "'>" + item.cname + "</option>").appendTo($("#head_two"));
});
}
});
}); spa
便可实现二级联动下拉列表 it