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

ajaxhe

2014-09-12

关注关注

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     
}  
?>  