php+mysql+js构建多三级联动菜单（原理可无限联动）

大 | 中 | 小
[晴 January 8, 2007 13:43 | by jed ]
这几天一直在琢磨三级联动菜单的问题，我本身对js并不是太了解，这能照葫芦画瓢。好不容易找了个例子，照着改了改，并发现，原来可以无限联动的。
先说例子：
数据库

数据库是

表depart

departID   departName

表subject

subjectID   subjectName   departID


代码如下：

[separator]
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
<?
mysql_connect("localhost","root","");
mysql_select_db( "test" );
$sql = "select * from subject";
$result = mysql_query( $sql );
$count = 0;
while($res = mysql_fetch_row($result)){
?>
subcat[<?=$count?>] = new Array("<?=$res[0]?>","<?=$res[1]?>","<?=$res[2]?>");
<?
$count++;
}
echo "onecount=$count;";
?>
//联动函数
function changelocation(locationid)
   {
   document.myform.ctype.length = 0;
   var locationid=locationid;
   var i;
   for (i=0;i < onecount; i++)
       {
           if (subcat[i][2] == locationid)
           {
      //var newOption1=new Option(subcat[i][1], subcat[i][0]);
               //document.all.ctype.add(newOption1);
               document.myform.ctype.options[document.myform.ctype.length] = new Option(subcat[i][1], subcat[i][0]);
           }        
       }
       
   }    
</script>
<form method="post" name="myform" action="ru_query.php">
<select name="type" onChange="changelocation(document.myform.type.options[document.myform.type.selectedIndex].value)" size="1">
<option selected value="">请指定主分类</option>
       
<?
  $sql = "select * from depart";
  $result = mysql_query( $sql );
  while($res = mysql_fetch_row($result)){
?>
   <option value="<? echo $res[0]; ?>"><? echo $res[1]; ?></option>
 <? } ?>
       
      </select>
 

   <select name="ctype">                  
       <option selected value="">请指定小分类</option>
   </select>
<input type="submit" name="Submit" value="搜索">
</form>



而我的数据库和例子有所不同。
数据库：


数据库：shangmao
表vacation

id          reid                       kind_name
类别ID   所属类别ID              类别名称



代码：


<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
<?
mysql_connect("localhost","root","123");
mysql_select_db( "shangmao" );
$sql = "select * from vacation";
$result = mysql_query( $sql );
$count = 0;
while($res = mysql_fetch_array($result)){
?>
subcat[<?=$count?>] = new Array("<?=$res[id]?>","<?=$res[kind_name]?>","<?=$res[reid]?>");
<?
$count++;
}
echo "onecount=$count;";
?>
//联动函数
function changelocation(locationid)
   {
   document.myform.ctype.length = 0;
   var locationid=locationid;
   var i;
   for (i=0;i < onecount; i++)
       {
           if (subcat[i][2] == locationid)
           {
      //var newOption1=new Option(subcat[i][1], subcat[i][0]);
               //document.all.ctype.add(newOption1);
               document.myform.ctype.options[document.myform.ctype.length] = new Option(subcat[i][1], subcat[i][0]);
           }        
       }
       
   }  
function changelocation2(locationid)
   {
   document.myform.dtype.length = 0;
   var locationid=locationid;
   var j;
   for (j=0;j < onecount; j++)
       {
           if (subcat[j][2] == locationid)
           {
      //var newOption1=new Option(subcat[i][1], subcat[i][0]);
               //document.all.dtype.add(newOption1);
               document.myform.dtype.options[document.myform.dtype.length] = new Option(subcat[j][1], subcat[j][0]);
           }        
       }
       
   }    
</script>
<form method="post" name="myform" action="ru_query.php">
<select name="type" onChange="changelocation(document.myform.type.options[document.myform.type.selectedIndex].value)" size="1">
<option selected value="">请指定主分类</option>

<? include "inc/config.php";
  $sql = "select * from  vacation where reid=0";
  $result = mysql_query( $sql );
  while($res = mysql_fetch_array($result)){
?>
   <option value="<? echo $res[id]; ?>"><? echo $res[kind_name]; ?></option>
 <? } ?>
       
      </select>
   
   <select name="ctype" onChange="changelocation2(document.myform.ctype.options[document.myform.ctype.selectedIndex].value)" size="1">                  
       <option selected value="">请指定小分类</option>
   </select>
   <select name="dtype">                  
       <option selected value="">三级分类</option>
   </select>
<input type="submit" name="Submit" value="搜索">
</form>



如果想添加第四级别菜单，只需要在select处添加一个onChange="changelocation2(document.myform.ctype.options[document.myform.ctype.selectedIndex].value)"
注意，改里面第名字，同时再加个changelocation就可以了。
不明白的可在后面回复问我。
Tags: , ,
生活日志 | 评论(18) | 引用(0) | 阅读(4459)
谢谢您
May 18, 2007 14:40
搂住厉害！赞一个 ！！
julia
May 15, 2007 18:41
多谢！按照你的方法。成功三级联动！zan
发
April 26, 2007 18:48
<?
//****************** 连接选择数据库 ***************
require_once('../Connections/sancfig.php');
//******************提取省份信息******************
$sqlSel = "select * from news1type order by News1TypeID ";
$result = mysql_query($sqlSel) or die("Query failed : " . mysql_error());

$forum_data = array();
while( $row = mysql_fetch_array($result) )
{
      $forum_data[] = $row;
}
//print_r ($forum_data);
mysql_free_result($result);

//**************获取城市信息**************        
$sqlSel2 = "select * from news2type order by News1TypeId desc";

if( !($result2 = mysql_query($sqlSel2)) )
{
      die('Could not query news2type list');
}

$forum_data2 = array();
while( $row2 = mysql_fetch_array($result2) )
{
      $forum_data2[] = $row2;
}

mysql_free_result($result2);
?>

<!--************ JavaScript处理province--onChange *************-->
<script language = "JavaScript">
var onecount2;
subcat2 = new Array();
<?php
$num2 = count($forum_data2);
?>
onecount2=<?echo $num2;?>;
<?
for($j=0;$j<$num2;$j++)
{
?>
subcat2[<?echo $j;?>] = new Array("<?echo $forum_data2[$j]['News1TypeId'];?>","<?echo $forum_data2[$j]['News1TypeId'];?>","<?echo $forum_data2[$j]['News2Typename'];?>");
<?}?>
function changelocation(News2TypeId)
{
document.myform.city.length = 0;
var News2TypeId=News2TypeId;
var j;
document.myform.city.options[0] = new Option('==选择城市==','');
for (j=0;j < onecount2; j++)
{
if (subcat2[j][1] == News2TypeId)
 {
 document.myform.city.options[document.myform.city.length] = new Option(subcat2[j][2], subcat2[j][0]);
 }
}
}
</script>

<!--********************页面表单*************************-->
<form name="myform" method="post">
地址：<select name="bigClass" onChange="changelocation(document.myform.bigClass.options[document.myform.bigClass.selectedIndex].value)" size="1">
<option selected>请选择省份</option>
     
<?php
$num = count($forum_data);

for($i=0;$i<$num;$i++)
{
?>
<option value="<?echo $forum_data[$i]['News1TypeId'];?>"><?echo $forum_data[$i]['NewsTypename'];?></option>
<?
}
?>
</select>
<select name="city" multiple>
<SELECT name=city size=1 id="city">
<selected value="">==选择城市==</option>
</select>
</form>
帮我看看哪有错
发
April 26, 2007 18:45
我那个二级的，请问上面的大虾们，省的出来了，可是城市的出不来。
蚂蚁
April 25, 2007 08:09
谢谢 回复  竹笠  问题解决了 我是蚂蚁 哈哈
jed Email Homepage
April 14, 2007 08:03
include "inc/config.php";
自己可以改成自己的链接数据库语句。
另外，解释一下，二级是根据一级来的，id是每一级的ID号，reid是它所属的上一级的ID，联动是通过JS来控制的
蚂蚁
April 13, 2007 12:21
PHP+mysql实现全动态二级联动下拉列表 中的 二级列表值怎么取的啊  要存入数据库的啊 $city 是空的 ？？？？？
我的信箱 ycy900@126.com
     QQ:30192823


敬请回复  谢谢
jed 回复于 April 14, 2007 08:04
蚂蚁，你试试下面一个例子看看
jed Email Homepage
April 9, 2007 15:30
有问题可以直接QQ问我，QQ：512998812，一般在线
julia Email
April 9, 2007 10:20
二级没有联动？？？
能否将你的数据库借用参考？谢谢！
朱丽 Email
April 8, 2007 17:55
请忽略上次的问题，已经解决。
但下面的语句
<option value="<? echo $res[id]; ?>"><? echo $res[kind_name]; ?></option>

------------value="<? echo $res[id]; ?>"可以做为赋值语句吗？
分页： 1/2 第一页 1 2 下页 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]