ajax php 动态读取的级联菜单 联动菜单
数据库
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