我給你提供一個三級的
創(chuàng)新互聯(lián)公司提供高防主機(jī)、云服務(wù)器、香港服務(wù)器、達(dá)州主機(jī)托管等
主頁面是
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title三級聯(lián)動下拉列表/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']; //默認(rèn)要操作的三個ID，注意先后順序，不可顛倒。
// 參數(shù)說明:pid是關(guān)聯(lián) 的id (第二個參數(shù)) 的父級,n表示是第幾級,(如第一級，第二級，第三級),selected 默認(rèn)被選中的選擇的主鍵
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 +')'); //把傳過來的字符串轉(zhuǎn)化成一個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);
//三個都寫是為了修改的時(shí)候，請三個框中默認(rèn)的都有選中的值,一般增加的時(shí)候只寫第一個就可以了。
});
/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));
數(shù)據(jù)庫關(guān)聯(lián)是
表province 區(qū)域表
有ID province_id province_name三個字段
id是自增的 province_id為唯一
表CITY 城市表
有ID city_id city_name province_id
其中province_id與province表的province_id對應(yīng)
id是自增的 city_id為唯一
最后一個表類似與city表
jquery.js可以到下載
如果有問題可以在晚上7-10點(diǎn) 在H!給我留言
html文件：
liandong.html
首先要引入jquery.js文件
html
title二級聯(lián)動/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進(jìn)行傳值
$.getJSON('__URL__/liandong',{id:$id},function(data){
//回調(diào)函數(shù)
if (data.status==1){
//首先清除子類中值不為空的，如果沒有這句話你會發(fā)現(xiàn)子類的顯示會這個增加，二不是你想要的結(jié)果
$('#ServerId option[value!=""]').remove();
//計(jì)算返回?cái)?shù)組的數(shù)目，并循環(huán)顯示
for (var i=0;i=data.data.length;i++) {
//定義html標(biāo)簽，和顯示的值，id和type_name為數(shù)據(jù)庫中的字段名
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=""請選擇游戲區(qū)/option
?php
//循環(huán)顯示父類
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(){
//實(shí)例化數(shù)據(jù)表
$type=M('Type');
//首先是查詢類別表中的父類，我的是父類的pid都為0
$plei=$type-where('pid=0')-select();
//分配變量
$this-assign("plei",$plei);
//這個主要是判斷父類的內(nèi)容是否發(fā)生變化，此判斷非常重要（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 后盾網(wǎng)=Array("后盾IT教育","后盾網(wǎng)php培訓(xùn)","朝陽","孫河");
var 后盾網(wǎng)=Array("php培訓(xùn)","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="后盾網(wǎng)"php培訓(xùn)/option
option value="其他地方"其他地方/option
/select
select name="city"option value="chooseCity" selected="selected"請選擇/option/select/td
/body如果還有不懂的可以去后盾網(wǎng)論壇問題求助專區(qū)，他們可以幫到你更多，希望我的回答能幫到你！
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鎮(zhèn)江/option
option蘇州/option
option南通/option
option揚(yáng)州/option
/select
select 有 onchange 事件 ，觸發(fā) js 進(jìn)行ajax 請求 ， 然后返回 數(shù)據(jù)進(jìn)行組合構(gòu)成 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";
}
}
調(diào)用時(shí)把以下兩句分別放在大小類中.
Opt_Sel('大類表名','大類字段id','大類字段name',你要修該的大類字段id值);
Opt_Sel('小類表名','小類字段id','小類字段name',你要修該的小類字段id值);
重慶分公司
重慶分公司
