ajax+jQuery 无限级联动

最新推荐文章于 2017-08-19 11:22:01 发布

小陈22

最新推荐文章于 2017-08-19 11:22:01 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/u011691759/article/details/16818561

版权

这篇博客介绍了如何利用Ajax和jQuery实现无限级联动效果，以ECSHOP的栏目表为例，详细阐述了从数据库建表、PHP查询到HTML和JavaScript交互的全过程。

摘要由CSDN通过智能技术生成

以上为效果图,下面的大多数都是从别人那里转过来的，只不过自己整理了一下。

今天也算是有一些时间。所以来整理这个资料，无限级联动在开发当中很有用的

我就以ecshop中的栏目表为例

第一步:建表

CREATE TABLE `category` (
`cat_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT primary key,
`cat_name` varchar(90) NOT NULL DEFAULT '',
`parent_id` smallint(5) unsigned NOT NULL DEFAULT '0'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `category` (`cat_id`, `cat_name`,`parent_id`) VALUES
(1, '手机类型', 0),(2, 'CDMA手机',1),(3, 'GSM手机', 1),(4, '3G手机', 1),
(5, '双模手机',1),(6, '手机配件', 0),(7, '充电器',6),(8, '耳机', 6),(9, '电池',6),
(11, '读卡器和内存卡', 6),(12, '充值卡',0),(13, '小灵通/固话充值卡', 12),
(14, '移动手机充值卡',12),(15, '联通手机充值卡',12);

第二步

新建query.jphp

用来查询数据库。主要是为了拼接我们要的option

<?php
mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');
$cat_id=$_POST['cat_id']!=''?$_POST['cat_id']:0;
$option='';
$sql='select cat_id,cat_name from category where parent_id='.$cat_id;
$result=mysql_query($sql);
while($row=(mysql_fetch_row($result))){
      $option .= "<option value='{$row[0]}'>{$row[1]}</option>";
}
if($option!=''){
   if($cat_id==0){
       echo $option;
   }else{
       echo "<select id='cat{$_POST['node']}' name='cat{$_POST['node']}' οnchange='cat({$_POST['node']});'>".$option."</select>";
   }
}else{
   echo 'no';
}
?>

第三步。建一个query.html

其实主要是js怎么实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<title>无限级栏目联动</title>
</head>
<script type="text/javascript">
onajax('0','cat1');
function cat(u_node){
node = u_node+1;
onlink(u_node,node);
}
function onlink(u_node,node){
      var cat_id = $("#cat"+u_node).val();
      //while循环判断下一个select 是否存在，如存在则删除直到不存在为止
      donode = node;
      do{
              if($("#cat"+donode).length >0){
               $("#cat"+donode).remove();
               donode++;
           }else{
               break;
           }
      }while(1)
      if(cat_id!=''){
       onajax(cat_id,node);
      }
}
function onajax(cat_id,node){
$.ajax({
       type:"POST",
       url:"query.php",
       data:"cat_id="+cat_id+"&node="+node,
       success:function(msg){
            if(msg!='no' & cat_id==0){
               $("#"+node).append(msg);
                $("#"+node).show();
            }else if(msg!='no'){
                $("#cat").append(msg);
            }
       }
   }) ;
}
</script>
<body>
<div id="cat">
<select name="cat1" id="cat1" οnchange="cat(1);">
      <option value="" >顶级分类</option>
</select>
</div>
</body>
</html>

小陈22

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ajax+jQuery 无限级联动

今天也算是有一些时间。所以来整理这个资料，无限级联动在开发当中很有用的我就以ecshop中的栏目表为例第一步:建表CREATE TABLE `category` ( `cat_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT primary key, `cat_name` varchar(90) NOT NULL DEFAU
复制链接

扫一扫