我给你提供一个三级的
创新互联公司提供高防主机、云服务器、香港服务器、达州主机托管等
主页面是
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title三级联动下拉列表/title
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
script type="text/javascript" src="/js/jquery.js"/script
script type="text/javascript"
!--
var temp;
var ids = ['province','city','eare1']; //默认要操作的三个ID，注意先后顺序，不可颠倒。
// 参数说明:pid是关联 的id (第二个参数) 的父级,n表示是第几级,(如第一级，第二级，第三级),selected 默认被选中的选择的主键
function getList (pid,id,n,selected) {
var list = document.getElementById(id);
$.post ('ajax.php?act=getList',{'pid':pid,'action':id},function (data) {
var temp1 = eval('('+ data +')'); //把传过来的字符串转化成一个JSON对象。
var leng = temp1.length;
var n = (n ids.length ) ? ids.length : n;
n = (n 0 ) ? 0 : n;
for (var j = n ; j ids.length ; j++)
{
var t = 'temp'+j
t = document.getElementById(ids[j]);
t.options.length = 1;
t.options[0]=new Option('请选择','*');
}
if (leng 0) {
list.length = leng + 1;
for (var i=0;i temp1.length ;i++ )
{
list.options[i+1]=new Option(decodeURI(temp1[i].key),temp1[i].val);
if (temp1[i].region_id == selected ) {
list.options[0].selected = 'selected';
}
if (selectedlist.options[i+1].value==selected){
list.options[i+1].selected = 'selected';
}
}
}
if(pid == '*') {
switch(id){
case 'city':
t = document.getElementById('city');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
break;
case 'eare1':
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
break;
}
}
if(document.getElementById('city')document.getElementById('city').value=='*'){
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
}
});
}
$(function () {
getList ('1','province',1);
//三个都写是为了修改的时候，请三个框中默认的都有选中的值,一般增加的时候只写第一个就可以了。
});
/script
/head
body
div
select name="yc1" id="province" onchange="getList (this.value,'city',1)"
option value="*" selected="selected"请选择/option
/select
select name="yc2" id="city" onchange="getList (this.value,'eare1',2)"
option value="*" selected="selected"请选择/option
/select
select name="yc3" id="eare1"
option value="*" selected="selected"请选择/option
/select
/div
/body
/html
AJAX 页面是
?php
$link = mysql_connect("localhost", "root", "123456");
mysql_select_db("mydatabase");
$act = isset ($_GET['act']) ? $_GET['act'] : '' ;
$action = isset ($_POST['action']) ? $_POST['action'] : '' ;
$pid = isset ($_POST['pid']) ? $_POST['pid'] : '' ;
$arr = array();
switch ($action) {
case 'province':
$sql = "select DISTINCT(province_name) val,province_id key from province order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res)){
$arr[] = $col;
}
break;
case 'city':
$sql = "select DISTINCT(city_name) val,city_id key from city where `province_id` = '".$pid."'
order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res)){
$arr[] = $col;
}
break;
case 'eare1':
$sql = "select DISTINCT(eare1_name) val,eare1_id key from eare1 where `city_id` = '".$pid."'
order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res)){
$arr[] = $col;
}
break;
}
mysql_close($link);
$list = array();
$i = 0;
foreach($arr as $k = $v){
foreach($v as $key = $value){
if(!preg_match("|^\d+|",$key)){
$list[$i][$key] = $value;
}
}
$i++;
}
print_r (json_encode ($list));
数据库关联是
表province 区域表
有ID province_id province_name三个字段
id是自增的 province_id为唯一
表CITY 城市表
有ID city_id city_name province_id
其中province_id与province表的province_id对应
id是自增的 city_id为唯一
最后一个表类似与city表
jquery.js可以到下载
如果有问题可以在晚上7-10点 在H!给我留言
html文件：
liandong.html
首先要引入jquery.js文件
html
title二级联动/title
head
script src="__PUBLIC__/scripts/jquery.js" type="text/javascript"/script
script type="text/javascript"
$(function(){
$('#AreaId').change(function(){
//获取父类的id
var $id=$('#AreaId').val();
//通过ajax进行传值
$.getJSON('__URL__/liandong',{id:$id},function(data){
//回调函数
if (data.status==1){
//首先清除子类中值不为空的，如果没有这句话你会发现子类的显示会这个增加，二不是你想要的结果
$('#ServerId option[value!=""]').remove();
//计算返回数组的数目，并循环显示
for (var i=0;i=data.data.length;i++) {
//定义html标签，和显示的值，id和type_name为数据库中的字段名
var option ="option value="+data.data[i].id+""+data.data[i].type_name+"/option";
//显示的位置
$(option).appendTo('#ServerId');
}
}
});
});
});
/script
/head
body
select id="AreaId" name="AreaId"
option selected="selected" value=""请选择游戏区/option
?php
//循环显示父类
foreach($plei as $val){
?
option value="{$val[id]}"{$val[type_name]}/option
?php
}
?
/select
select id="ServerId" name="ServerId"
option selected="selected" value=""请选择游戏服/option
/select
/body
/html
php文件
IndexAction.class.php
class IndexAction extends Action {
public function liandong(){
//实例化数据表
$type=M('Type');
//首先是查询类别表中的父类，我的是父类的pid都为0
$plei=$type-where('pid=0')-select();
//分配变量
$this-assign("plei",$plei);
//这个主要是判断父类的内容是否发生变化，此判断非常重要（ps：我那会没写这个判断，总是出错,非常头疼）
if($_GET[id]){
$sel=$type-where('pid='.$_GET[id])-select();
$this-ajaxReturn($sel,'子类',1);
}
$this-display();
}
}
JAVASCRIPT就可以写了 你把JAVASCRIPT追加到PHP代码里面就OK另外
具体 代码
head
script language="javascript" type="text/javascript"
var 后盾网=Array("后盾IT教育","后盾网php培训","朝阳","孙河");
var 后盾网=Array("php培训","IT教育");
var 其余地方=Array("国外","未知地址");
function change()
{
shengList=document.getElementById("sheng");
nIndex=shengList.selectedIndex;
cityList=document.getElementById("city");
switch(nIndex)
{
case 1:
doChange(cityList,北京);
break;
case 2:
doChange(cityList,朝阳);
break;
case 3:
doChange(cityList,其余地方);
break;
default:
cityList.options.length=1;
cityList.options[0].text="--请选择--";
break;
}
}
function doChange(myList,MyItem)
{
var iLength=MyItem.length;
myList.options.length=iLength;
for(var i=0;iiLength;i++)
{
myList.options[i].text=MyItem[i];
}
}
/script
/head
body
select name="sheng" onchange="change()"
option value="chooseSheng"请选择/option
option value="北京"朝阳/option
option value="后盾网"php培训/option
option value="其他地方"其他地方/option
/select
select name="city"option value="chooseCity" selected="selected"请选择/option/select/td
/body如果还有不懂的可以去后盾网论坛问题求助专区，他们可以帮到你更多，希望我的回答能帮到你！
js代码
var currentShowCity=0;
$(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected"))
{
$(".city").hide();
$(".city").eq(i).show();
currentShowCity=i;
}
});
});
$("#province").change();
});
function getSelectValue(){
alert("1级="+$("#province").val());
$(".city").each(function(i,o){
if(i == currentShowCity){
alert("2级="+$(".city").eq(i).val());
}
});
}
html代码
select id="province"
option----请选择省份----/option
option北京/option
option上海/option
option江苏/option
/select
select class="city"
option----请选择城市----/option
/select
select class="city"
option东城/option
option西城/option
option崇文/option
option宣武/option
option朝阳/option
/select
select class="city"
option黄浦/option
option卢湾/option
option徐汇/option
option长宁/option
option静安/option
/select
select class="city"
option南京/option
option镇江/option
option苏州/option
option南通/option
option扬州/option
/select
select 有 onchange 事件 ，触发 js 进行ajax 请求 ， 然后返回 数据进行组合构成 select 元素。替换第二个select就行了
function Opt_Sel($table,$id,$name,$postid){
$query=mysql_query("select * from $table");
while($row=mysql_fetch_array($query)){
$selected = $row[$id]==$postid ? "selected" : null;
echo "option value=\"$row[$id]\" $selected$row[$name]/option";
}
}
调用时把以下两句分别放在大小类中.
Opt_Sel('大类表名','大类字段id','大类字段name',你要修该的大类字段id值);
Opt_Sel('小类表名','小类字段id','小类字段name',你要修该的小类字段id值);