首页>>表单>>ajax php mysql无限级联菜单 联动菜单 二级联动 三级联动菜单(2014-03-17)

ajax php mysql无限级联菜单 联动菜单 二级联动 三级联动菜单

无限级联菜单 联动菜单 二级联动 三级联动菜单
有几个级别的菜单就显示级别

本例是《ajax php 动态读取的级联菜单 联动菜单》的扩展，由二级联动扩展到无限级

ajax php mysql无限级联菜单 联动菜单 二级联动 三级联动菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="show_sub_categories">  
  2.         <select name="search_category" class="parent">  
  3.         <option value="" selected="selected">-- Categories --</option>  
  4.         <?php  
  5.         $query = "select * from ajax_categories where pid = 0";  
  6.         $results = mysql_query($query);  
  7.           
  8.         while ($rows = mysql_fetch_assoc(@$results))  
  9.         {?>  
  10.             <option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>  
  11.         <?php  
  12.         }?>  
  13.         </select>     
  14.           
  15.     </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3. $(document).ready(function() {  
  4.       
  5.     //$('#loader').hide();  
  6.       
  7.     $('.parent').livequery('change', function() {  
  8.           
  9.         $(this).nextAll('.parent').remove();  
  10.         $(this).nextAll('label').remove();  
  11.           
  12.         $('#show_sub_categories').append('<img src="loader.gif" style="float:left; margin-top:7px;" id="loader" alt="" />');  
  13.           
  14.         $.post("get_chid_categories.php", {  
  15.             parent_id: $(this).val(),  
  16.         }, function(response){  
  17.               
  18.             setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);  
  19.         });  
  20.           
  21.         return false;  
  22.     });  
  23. });  
  24.   
  25. function finishAjax(id, response){  
  26.   $('#loader').remove();  
  27.   
  28.   $('#'+id).append(unescape(response));  
  29. }   
  30.   
  31. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_290.html