小妹请教前辈如何做三级菜单联动！

Question

我做了三张表，一张省份(province)的表，一张城市(city)表，一张用户(user)表--
-- 表的结构 `city`
--CREATE TABLE `city` (
  `idcity` int(11) NOT NULL auto_increment COMMENT '城市ID',
  `idprovince` int(11) NOT NULL COMMENT '省ID',
  `city_name` varchar(50) character set utf8 collate utf8_unicode_ci NOT NULL COMMENT '城市名称',
  PRIMARY KEY  (`idcity`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;--
-- 导出表中的数据 `city`
--INSERT INTO `city` (`idcity`, `idprovince`, `city_name`) VALUES
(1, 1, '石家庄市'),
(2, 1, '邯郸市'),
(3, 3, '东城区'),
(4, 3, '西城区'),
(5, 3, '崇文区'),
(6, 3, '宣武区');-- ----------------------------------------------------------
-- 表的结构 `province`
--CREATE TABLE `province` (
  `idprovince` int(11) NOT NULL auto_increment COMMENT '省ID',
  `province_name` varchar(50) character set utf8 collate utf8_unicode_ci NOT NULL COMMENT '名称',
  PRIMARY KEY  (`idprovince`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;--
-- 导出表中的数据 `province`
--INSERT INTO `province` (`idprovince`, `province_name`) VALUES
(1, '河北省'),
(2, '河南省'),
(3, '北京市'),
(4, '广东省');-- ----------------------------------------------------------
-- 表的结构 `user`
--CREATE TABLE `user` (
  `uid` int(11) NOT NULL auto_increment COMMENT 'user表ID',
  `user_name` varchar(50)character set utf8 collate utf8_unicode_ci NOT NULL COMMENT '用户姓名',
  `idprovince` int(11) NOT NULL COMMENT '所属省ID',
  `idcity` int(11) NOT NULL COMMENT '所属城市ID',
  PRIMARY KEY  (`uid`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;--
-- 导出表中的数据 `user`
--INSERT INTO `user` (`uid`, `user_name`, `idprovince`, `idcity`) VALUES
(1, '张三', 1, 0),
(2, '李四', 1, 1),
(3, '王五', 2, 0),
(4, '店小二', 3, 3),
(5, '孙二娘', 3, 4),
(6, '武松', 3, 6);
我想做一个三级联动的下拉菜单！<script language="javascript">
function InitAjax() 
{ 
var ajax=false; 
try 
{ 
ajax=new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch(e) 
{ 
try 
{ 
ajax=new ActiveXObject("Microsft.XMLHTTP"); 
} 
catch(E) 
{ 
ajax=false; 
} 
} 
if(!ajax&& typeof XMLHttpRequest !='undefined') 
{ 
ajax=new XMLHttpRequest(); 
} 
return ajax; 
} 
function onChangeProvince() 
{ 
//获取接受返回信息层 
var msg = document.getElementById("space_span");  //获取表单对象和用户信息值  //接收表单的URL地址 
var url="selectSpace.php"; 

//需要POST的值，把每个变量都通过&来联接 
var postStr = "idcompany="+ document.getElementById("company").value; 

//实例化Ajax 
var ajax = InitAjax(); 
//通过Post方式打开连接 
ajax.open("POST", url, true); 
//定义传输的文件HTTP头信息 
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
//发送POST数据 
//alert(postStr); 
ajax.send(postStr); 
//获取执行状态 
ajax.onreadystatechange = function() 
{ 
//如果执行状态成功，那么就把返回信息写到指定的层里 
if (ajax.readyState == 4 && ajax.status == 200) 
{ 
msg.innerHTML = ajax.responseText; 
} 
} 
}
</script>
<select name="province" id="province" onchange="onChangeProvince()">
<option value='0'>请选择</option>  
<?
  $sql="select idprovince,province_name from provinceorder by idprovince asc";
  $rs=$dbc->getRsArray($sql);
  //$dbc是我做一个数据库连接的类，方法getRsArray($sql)是一个从数据库获取的记录，返回所有记录。
  //$dbc->num_rows是返回行数
  for($i=0;$i<$dbc->num_rows;$i++){
?>             
<option value="<?=$rs[$i][idprovince]?>" ><?=$rs[$i][province_name]?></option>
<?}?>
</select>
<span id="space_span">       
  &nbsp;&nbsp;   销售员：
 <select name="sale" id="sale">
                <option value="0">无</option>
                <option value="1">全部</option>
                 <?
          $sql="select uid,user_name from operator_admin";
          $rs=$dbc->getRsArray($sql);
  for($i=0;$i<$dbc->num_rows;$i++){
          ?>
          <option value="<?=$rs[$i][uid]?>"><?=$rs[$i][user_name]?></option>
                <?}?>                  
              </select></span>
selectSpace.php<?php 
header("Content-type: text/html; charset=gb2312"); 
session_start();
include("../../includes/dbconn.php");$idprovince=fixid($_REQUEST["idprovince"]); $sql="select idcity,city_name from city where idprovince=".$idprovince;
$rs=$dbc->getRsArray($sql);if($dbc->num_rows!=0)
{
$str="<select name='city' onchange='onChangeCity()'><option value='0'>全部</option>";
for($i=0;$i<$dbc->num_rows;$i++)
{
$str.="<option value='".$rs[$i][idcity]."'>".$rs[$i][city_name]."</option>"; }
$str.="</select>";
$sql="select uid,user_name from operator_admin where idprovince=".$idprovince;
$rs=$dbc->getRsArray($sql);
if($dbc->num_rows!=0)
{
$str.="&nbsp;&nbsp;   销售员：<select name='sale' id='sale'><option value='0'>无</option><option value='1'>全部</option>";
for($i=0;$i<$dbc->num_rows;$i++)
{
$str.="<option value='".$rs[$i][uid]."'>".$rs[$i][user_name]."</option>";
}
$str.="</select>";
}
else 
{
$str.="&nbsp;&nbsp;   销售员：<select name='sale' id='sale'><option value='0'>无</option></select>";
}
echo $str;
}
else 
{
$sql="select uid,user_name from operator_admin where idprovince=".$idprovince;
$rs=$dbc->getRsArray($sql);
if($dbc->num_rows!=0)
{
$str.="&nbsp;&nbsp;   销售员：<select name='sale' id='sale'><option value='0'>无</option><option value='1'>全部</option>";
for($i=0;$i<$dbc->num_rows;$i++)
{
$str.="<option value='".$rs[$i][uid]."'>".$rs[$i][user_name]."</option>";
}
$str.="</select>";
}
else 
{
$str.="&nbsp;&nbsp;   销售员：<select name='sale' id='sale'><option value='0'>无</option></select>";
}
echo $str;
}
?> 
我的主要含义是选择省份的时候，销售员能列出来。就是省份下的销售员具体显示到城市的时候，销售员也能跟着发生变化，就是省份-城市下的销售员onChangeCity() 这个方法我就不会写了！或者不用Ajax也行！请各位前辈帮我指正应该怎么做！谢谢各位前辈了！

Answer 1

你这不是有个省份联动么，城市联动是一样的，把选中的城市post给php服务端查出销售员
function onChangeProvince() 
{ 
    //获取接受返回信息层 
    var msg = document.getElementById("space_span");     //获取表单对象和用户信息值     //接收表单的URL地址 
    var url="selectSpace.php"; 
    
    //需要POST的值，把每个变量都通过&来联接 
    var postStr = "idcompany="+ document.getElementById("company").value; 
    
    //实例化Ajax 
    var ajax = InitAjax(); 
    //通过Post方式打开连接 
    ajax.open("POST", url, true); 
    //定义传输的文件HTTP头信息 
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    //发送POST数据 
    //alert(postStr); 
    ajax.send(postStr); 
    //获取执行状态 
    ajax.onreadystatechange = function() 
    { 
    //如果执行状态成功，那么就把返回信息写到指定的层里 
        if (ajax.readyState == 4 && ajax.status == 200) 
        { 
            msg.innerHTML = ajax.responseText; 
        } 
    } 
}
跟你这个一样的

Answer 2

本来想帮你写一个，但是一看到charset=gb2312，算了，麻烦，不搞了

Answer 3

我看了代码后，眼晕了，觉得有几点要改改，再来去写代码。
1 ajax 这块用jquery 来实现，会比较简单.
2 要学会调试，firebug 是个不错的工具，能看到发送的包和接收的包.
3 理清楚思路再做，一步一步的来，先实现二级的，再扩展为三级的。最后，我貼一点我以前实现的一个无限分级的代码，用json 来配置实现的，希望能有所帮助。<!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" />
<title>管理区域</title>
<base href="<?php echo base_url() ?>" />
<?php echo CS_get('public_head'); //公共JS载入 ?>
<?php echo CS_get('public_ui_js'); //公共JS载入 ?>
</head>
<script src="inc/javascript/linklist.js"></script>
<script>$(function(){     // Document is ready   
for (var j_index in json)
{
temp_json = json[j_index];
//初始化首结点信息
if(j_index == 0 )
{
head_json = temp_json;
}
/*注册事件*/
if(temp_json.event_type == "change")
{
   handle_change(temp_json); //处理onchange 提交事件.
}
}
linklist_child(head_json); //初始化首节点
});  
var json = [ //json 配置对象列表.
{divId:"area_div",fieldName:"area2_pid[]",renderType:"checkBox",event_type:"change",table:"area2",cid_name:"area2_id",ctitle_name:"area2_title",pid_name:"area2_pid",pid_obj_name:""},
{divId:"area2_div",fieldName:"area3_pid[]",renderType:"checkBox",event_type:"change",table:"area3",cid_name:"area3_id",ctitle_name:"area3_title",pid_name:"area3_pid",pid_obj_name:"area2_pid[]"},{divId:"area2_div_2",fieldName:"test[]",renderType:"radio",event_type:"",table:"area3",cid_name:"area3_id",ctitle_name:"area2_title",pid_name:null,pid_obj_name:"area2_pid[]"},{divId:"area3_div",fieldName:"area3_id[]",renderType:"radio",event_type:"",table:"area3",cid_name:"area3_id",ctitle_name:"area3_title",pid_name:null,pid_obj_name:"area3_pid[]"}
];</script>
<style>
#area2_div {border:1px solid red; margin:10px;}
#area2_div_2 {border:1px solid green; margin:10px;}
</style>
<body>
<h1>LinkList json 数据模型demo</h1>
<h2>第一级菜单</h2>
<div  id="area_div">
<form method="post" id="area_div_form">
<input type="checkbox" name="area2_pid[]"  target = "area_id_form"  value="1"/> v1
<input type="checkbox" name="area2_pid[]"  target = "area_id_form"   value="2"/>v2
<input type="checkbox" name="area2_pid[]"  target = "area_id_form"  value="3"/>v3
</form>
</div><h2>第二级菜单 2.1</h2>
<div id="area2_div">
    <input type="checkBox" name="area3_pid[]" value="null"  /> 请选择area_2的值.
</div><h2>第二级菜单 2.2</h2>
<div id="area2_div_2">
    <input type="checkBox" name="area3_pid[]" value="null"  /> 请选择area_2的值.
</div>
<h2>第二级菜单3.1</h2>
<div id="area3_div">
    <input type="radio" name="area3_id[]" value="null"  /> 请选择上级菜单的值.
</div>
<div id="prompt">提示信息在这里</div>
</body>
</html> js 代码//inc/javascript/linklist.js
// JavaScript Document  created by xuxing 2009-12-22 
/******************************************************************************/
//  json item    组成明细说明
//  divId  json  对应的层的编号
//  fieldName    里面字段的命名
//  renderType   里面字段的类型
//  event_type   事件触发机制
//  table  cid_name   ctitle_name  pid_name   获取下一级数据所需求数据
//  pid_obj_name   父结点名称,相当于指针链表的 linkList 里面的pre.
//  树形结构，不支持正向遍历.可以反向遍历
/******************************************************************************/
function handle_change(json_obj)
{
   $("[name="+json_obj.fieldName+"]").change( function() {
  linklist_child(json_obj);
})
}/**获取下一级菜单的数据，并将其根据json 的配置，显示在下一级菜单中去.*/
function linklist_child(json_obj)
{
form_id = json_obj.divId+"_form";
var queryString = $("#"+form_id).formSerialize(); 
queryString += "&table="+json_obj.table;
queryString += "&pid_name="+json_obj.pid_name;
queryString += "&cid_name="+json_obj.cid_name;
queryString += "&ctitle_name="+json_obj.ctitle_name; 

$.post("/opera/get_link_json_data", queryString, function(data){
handle_load_child(json_obj,data);
} 
); 
       
   child_json  = find_child_object(json_obj);
   if(child_json.length) {
for(t = 0;t<child_json.length;t++)
{
linklist_child(child_json[t]);
}
   }
}/**取得子结点,并给子结点，按子结点所指定的类型添加数据，并添加 */
function handle_load_child(json_obj,data)
{
child_objects = find_child_object(json_obj);
if(child_objects.length)
{
for(t = 0 ;t <child_objects.length;t++)
{
      reder_data(child_objects[t],data);
}
}
}/**将子对象根据不同的渲染器写入相关的数据中去*/
function reder_data(json_obj,data)
{
    str = "handel_data_for_"+json_obj.renderType;
str_fun_handel = str+"(json_obj,data)";

divId = json_obj.divId;
    formId = divId+"_form";
    dest_html = "<form method=\"post\" id=\""+formId+"\">";

dest_html += eval(str_fun_handel);

dest_html += "<\/form>";
    $("#"+divId).html(dest_html);
  
   /*注册事件*/
if(json_obj.event_type == "change")
{
  handle_change(json_obj); //处理onchange 提交事件.
}}///处理列表
function handel_data_for_checkBox(json_obj,data)
{   dest_html = "";
   data_json = eval("var data_json = "+data);
   for(var d_index in data_json)
   {
      for(var d_index2 in data_json[d_index])
  {
     dest_html += "<input type = 'checkbox' name = '"+json_obj.fieldName+"'  value = '"+data_json[d_index][d_index2].value+"'/>"+data_json[d_index][d_index2].text;
  }
   }
   return dest_html;  
}function handel_data_for_radio(json_obj,data)
{
    dest_html = "";
   data_json = eval("var data_json = "+data);
   for(var d_index in data_json)
   {
      for(var d_index2 in data_json[d_index])
  {
     dest_html += "<input type = 'radio' name = '"+json_obj.fieldName+"'  value = '"+data_json[d_index][d_index2].value+"'/>"+data_json[d_index][d_index2].text;
  }
   }
   return dest_html;
   
}/**获取json 的了结点对象，以数组形式返回.*/
function find_child_object(json_obj)
{
    child_obj_arr = new Array();
for (var j_index in json)
{
temp_json = json[j_index];
if(temp_json.pid_obj_name == json_obj.fieldName)
{
child_obj_arr.push(temp_json);
}
}
    return child_obj_arr;
}

Answer 4

给点提示:
1 后台将读出来的数据放到数组里,用json_encode将数组转成串,并且返回给html
2 前台用js动态添加option数据.
function initSelect(arrSelect, obj)
{
    obj.empty();
    var option=null;
    var text = "";
    for(var i=0; i<arrSelect.length; i++)
    {
      option = document.createElement("option");
      option.text = arrSelect[i];
      option.value = arrSelect[i];
      obj[0].options.add(option);
    }
}//initSelect

Answer 5

很简单，你会员表不是有省和市ID吗，你每次查的时候提交这两个ID就可以了

Answer 6

我不得不出来赞扬一下jquery....

Answer 7

JS或JQUERY,省级连动脚本就能实现，没必要再写服务器端程序

Answer 8

PHP要实现联动只能用ajax配合session，建议楼主还是直接去找一个js插件调用一下方便得多

Answer 9

jquery 简单的很呢！怎么不去看看jQuery呢

Answer 10

先看清他的需求.
省市三级连动,
即时获取数据能有多大的数据量?另 jquery也是js,不要误导新人.

Answer 11

很久以前用prototype写了一个,想要的话PM

Answer 12

好的！我学习一下jquery然后在做一个！

Answer 13

这个试试：
http://www.webkey.cn/demo/view.asp?id=54