JQuery实现多级菜单联动效果

<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
       $(function(){
       $.post("getItemCatList.action",null,function(data){
       var str="";
       $.each(data,function(index,info){
       str+="<option value="+info['id']+">"+info['name']+"</option>";
       })
       $("#c1").append(str);
       })
       
       
       $("#c1").change(function(){
       $("#c2").empty();
       $.post("getItemCatList.action",{parentId:$(this).val()},function(data){
       var str="";
           $.each(data,function(index,info){
           str+="<option value="+info['id']+">"+info['name']+"</option>";
           })
           $("#c2").append(str);
       })
       })
       $("#c2").change(function(){
       $("#c3").empty();
       $.post("getItemCatList.action",{parentId:$(this).val()},function(data){
       var str="";
           $.each(data,function(index,info){
           str+="<option value="+info['id']+">"+info['name']+"</option>";
           })
           $("#c3").append(str);
       })
       })
       })




</script>




</HEAD>
<BODY >
      一级菜单 <select id="c1">
         <option>未选择</option>
       </select>&nbsp;&nbsp;&nbsp;
   二级菜单 <select id="c2">
         <option>未选择</option>
       </select>&nbsp;&nbsp;&nbsp;
  三级菜单 <select id="c3">
         <option>未选择</option>
       </select>

</BODY>



sql语句  select * from item_cat where parentid="0"      这个0是变量,通过前面的ajax传递到后台的.



发布了15 篇原创文章 · 获赞 2 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/chtjava/article/details/80993568