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

dengwen3

ajax php 动态读取的级联菜单 联动菜单
freejs.net 之前已经发布了一个二级联动菜单 《jquery ajax 读取联动菜单 select菜单》以及另外一篇ajax的联动菜单，具体的可以搜索“联动菜单”，但是之前发布的文章数据库是分开的2个表。
现在的数据库是一个表，无论多少级的菜单，只需要一个表即可。
 


演示
数据库
SQL Code

• CREATE TABLE `ajax_categories` (  
  
•   `id` int(11) NOT NULL auto_increment,  
  
•   `category` varchar(50) collate utf8_unicode_ci NOT NULL,  
  
•   `pid` int(11) NOT NULL,  
  
•   PRIMARY KEY  (`id`)  
  
• ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13 ;  
  
•   
  
• --   
  
• -- 导出表中的数据 `ajax_categories`  
  
• --   
  
•   
  
• INSERT INTO `ajax_categories` VALUES (1, '湖北', 0);  
  
• INSERT INTO `ajax_categories` VALUES (2, '浙江', 0);  
  
• INSERT INTO `ajax_categories` VALUES (3, '武汉', 1);  
  
• INSERT INTO `ajax_categories` VALUES (4, '鄂州', 1);  
  
• INSERT INTO `ajax_categories` VALUES (5, '金华', 2);  
  
• INSERT INTO `ajax_categories` VALUES (6, '广东', 0);  
  
• INSERT INTO `ajax_categories` VALUES (7, '襄阳', 1);  
  
• INSERT INTO `ajax_categories` VALUES (8, '广州', 6);  
  

 

XML/HTML Code

• <form action="#" name="form" id="form" method="post" onsubmit="return alert_id();" enctype="multipart/form-data">  
  
•   
  
•     <div class="both">  
  
•         <h4>选择省份</h4>  
  
•         <select name="search_category"  id="search_category_id">  
  
•         <option value="" selected="selected"></option>  
  
•         <?php  
  
•         $query = "select * from ajax_categories where pid = 0";  
  
•         $results = mysql_query($query);  
  
•           
  
•         while ($rows = mysql_fetch_assoc(@$results))  
  
•         {?>  
  
•             <option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>  
  
•         <?php  
  
•         }?>  
  
•         </select>         
  
•     </div>  
  
•       
  
•     <div class="both">  
  
•         <h4 id="show_heading">选择城市</h4>  
  
•         <div id="show_sub_categories" align="center">  
  
•             <img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />  
  
•         </div>  
  
•     </div>  
  
•     <br clear="all" /><br clear="all" />  
  
•       
  
•     <input type="submit" name="" value="GO" />  
  
• </form>  
  

 
JavaScript Code

• <script type="text/javascript">  
  
•   
  
• $(document).ready(function() {  
  
•   
  
•     $('#loader').hide();  
  
•     $('#show_heading').hide();  
  
•       
  
•     $('#search_category_id').change(function(){  
  
•         $('#show_sub_categories').fadeOut();  
  
•         $('#loader').show();  
  
•         $.post("get_chid_categories.php", {  
  
•             parent_id: $('#search_category_id').val(),  
  
•         }, function(response){  
  
•               
  
•             setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);  
  
•         });  
  
•         return false;  
  
•     });  
  
• });  
  
•   
  
• function finishAjax(id, response){  
  
•   $('#loader').hide();  
  
•   $('#show_heading').show();  
  
•   $('#'+id).html(unescape(response));  
  
•   $('#'+id).fadeIn();  
  
• }   
  
•   
  
• function alert_id()  
  
• {  
  
•     if($('#sub_category_id').val() == '')  
  
•     alert('Please select a sub category.');  
  
•     else  
  
•     alert($('#sub_category_id').val());  
  
•     return false;  
  
• }  
  
•   
  
• </script>  
  

 get_chid_categories.php
 
PHP Code

• <?php  
  
•   
  
•     require "../../conn.php";  
  
•   
  
• if($_REQUEST)  
  
• {  
  
•     $id     = $_REQUEST['parent_id'];  
  
•     $query = "select * from ajax_categories where pid = ".$id;  
  
•     $results = mysql_query( $query);?>  
  
•       
  
•     <select name="sub_category"  id="sub_category_id">  
  
•     <option value="" selected="selected"></option>  
  
•     <?php  
  
•     while ($rows = mysql_fetch_assoc(@$results))  
  
•     {?>  
  
•         <option value="<?php echo $rows['category'];?>  ID=<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>  
  
•     <?php  
  
•     }?>  
  
•     </select>     
  
•       
  
• <?php     
  
• }  
  
• ?>  
  

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