ajax php 动态读取的级联菜单 联动菜单
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
页:
[1]