ajax php 动态读取的级联菜单 联动菜单

ajaxhe 2014-09-12

ajax php 动态读取的级联菜单 联动菜单

freejs.net 之前已经发布了一个二级联动菜单 《jquery ajax 读取联动菜单 select菜单》以及另外一篇ajax的联动菜单,具体的可以搜索“联动菜单”,但是之前发布的文章数据库是分开的2个表。

现在的数据库是一个表,无论多少级的菜单,只需要一个表即可。

ajax php 动态读取的级联菜单 联动菜单

数据库

SQL Code
  1. CREATE TABLE `ajax_categories` (  
  2.   `id` int(11) NOT NULL auto_increment,  
  3.   `category` varchar(50) collate utf8_unicode_ci NOT NULL,  
  4.   `pid` int(11) NOT NULL,  
  5.   PRIMARY KEY  (`id`)  
  6. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13 ;  
  7.   
  8. --   
  9. -- 导出表中的数据 `ajax_categories`  
  10. --   
  11.   
  12. INSERT INTO `ajax_categories` VALUES (1, '湖北', 0);  
  13. INSERT INTO `ajax_categories` VALUES (2, '浙江', 0);  
  14. INSERT INTO `ajax_categories` VALUES (3, '武汉', 1);  
  15. INSERT INTO `ajax_categories` VALUES (4, '鄂州', 1);  
  16. INSERT INTO `ajax_categories` VALUES (5, '金华', 2);  
  17. INSERT INTO `ajax_categories` VALUES (6, '广东', 0);  
  18. INSERT INTO `ajax_categories` VALUES (7, '襄阳', 1);  
  19. INSERT INTO `ajax_categories` VALUES (8, '广州', 6);  
 
XML/HTML Code
  1. <form action="#" name="form" id="form" method="post" onsubmit="return alert_id();" enctype="multipart/form-data">  
  2.   
  3.     <div class="both">  
  4.         <h4>选择省份</h4>  
  5.         <select name="search_category"  id="search_category_id">  
  6.         <option value="" selected="selected"></option>  
  7.         <?php  
  8.         $query = "select * from ajax_categories where pid = 0";  
  9.         $results = mysql_query($query);  
  10.           
  11.         while ($rows = mysql_fetch_assoc(@$results))  
  12.         {?>  
  13.             <option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>  
  14.         <?php  
  15.         }?>  
  16.         </select>         
  17.     </div>  
  18.       
  19.     <div class="both">  
  20.         <h4 id="show_heading">选择城市</h4>  
  21.         <div id="show_sub_categories" align="center">  
  22.             <img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />  
  23.         </div>  
  24.     </div>  
  25.     <br clear="all" /><br clear="all" />  
  26.       
  27.     <input type="submit" name="" value="GO" />  
  28. </form>  
JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3. $(document).ready(function() {  
  4.   
  5.     $('#loader').hide();  
  6.     $('#show_heading').hide();  
  7.       
  8.     $('#search_category_id').change(function(){  
  9.         $('#show_sub_categories').fadeOut();  
  10.         $('#loader').show();  
  11.         $.post("get_chid_categories.php", {  
  12.             parent_id: $('#search_category_id').val(),  
  13.         }, function(response){  
  14.               
  15.             setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);  
  16.         });  
  17.         return false;  
  18.     });  
  19. });  
  20.   
  21. function finishAjax(id, response){  
  22.   $('#loader').hide();  
  23.   $('#show_heading').show();  
  24.   $('#'+id).html(unescape(response));  
  25.   $('#'+id).fadeIn();  
  26. }   
  27.   
  28. function alert_id()  
  29. {  
  30.     if($('#sub_category_id').val() == '')  
  31.     alert('Please select a sub category.');  
  32.     else  
  33.     alert($('#sub_category_id').val());  
  34.     return false;  
  35. }  
  36.   
  37. </script>  

 get_chid_categories.php

PHP Code
  1. <?php  
  2.   
  3.     require "../../conn.php";  
  4.   
  5. if($_REQUEST)  
  6. {  
  7.     $id     = $_REQUEST['parent_id'];  
  8.     $query = "select * from ajax_categories where pid = ".$id;  
  9.     $results = mysql_query( $query);?>  
  10.       
  11.     <select name="sub_category"  id="sub_category_id">  
  12.     <option value="" selected="selected"></option>  
  13.     <?php  
  14.     while ($rows = mysql_fetch_assoc(@$results))  
  15.     {?>  
  16.         <option value="<?php echo $rows['category'];?>  ID=<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>  
  17.     <?php  
  18.     }?>  
  19.     </select>     
  20.       
  21. <?php     
  22. }  
  23. ?>  


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

相关推荐

ganyouxianjava / 0评论 2012-05-31