以上为效果图,下面的大多数都是从别人那里转过来的,只不过自己整理了一下。
今天也算是有一些时间。所以来整理这个资料,无限级联动在开发当中很有用的
我就以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>