无限级二级菜单,越来越多的被应用,譬如省级->市级的二级菜单
思路:一级下拉列表select 绑定一个id, jqury获取到该下拉列表的checked属性值,通过ajax请求获取到该值所对应的二级内容,然后jquery修改二级下拉列表的内容,即可实现动态生成二级联动下拉列表
示例:
下拉列表
<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>
jqury post获取
$("#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")); }); } }); });即可实现二级联动下拉列表