php实现三级级联下拉框-华尔子博-奥夏网

网上查找到的php实现三级级联下拉框的资料，共享个大家，大家一起进步，具体内容如下

index.php:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>Ajax联动菜单</title>

<script language="javascript" type="text/javascript" src="aa.js"></script>

</head>

<body>

<form>

<label>

<select name="sel" id="sel" onChange="showMenu(this.value);">

<option>一级分类</option>

<?php

$conn = mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());

mysql_select_db('fitment', $conn) or die ('Can't use database : ' . mysql_error());

mysql_query("set names 'gb2312'");

$str = "SELECT * FROM `fitment_sort` where supid = '0' ORDER BY `id` ASC";

$result = mysql_query($str) or die("Invalid query: " . mysql_error());

if($result) while ($arr = mysql_fetch_array($result)){

echo <<<EOD

<option value={$arr["id"]}>{$arr["name"]}</option>

EOD; }

mysql_close($conn);

?>

</select>

</label>

<label>

<select name="sel2" id="sel2" onChange="showMenu2(this.value)">

<option>二级分类</option>

</select>

</label>

<label>

<select name="sel3" id="sel3">

<option>三级分类</option>

</select>

</label>

</form>

<input type=button value="send value" onClick=

"alert(document.getElementByIdx_x_xx_x_xx('sel').options[document.getElementByIdx_x_xx_x_xx('sel').selectedIndex].text + '-' + document.getElementByIdx_x_xx_x_xx('sel2').options[document.getElementByIdx_x_xx_x_xx('sel2').selectedIndex].text + '-' + document.getElementByIdx_x_xx_x_xx('sel3').options[document.getElementByIdx_x_xx_x_xx('sel3').selectedIndex].text)"

>

</body>

</html>

aa.js

<!--

var xmlHttp

var xmlHttp2

//函数showMenu(str) - 功能函数1

function showMenu(str) xmlHttp=GetXmlHttpObject() //调用GetXmlHttpObject()函数，创建XMLHttpRequest对象

if (xmlHttp==null) //如果创建失败，则 alert ("Browser does not support HTTP Request")

return

var url="get2.php" //定义url , 其主要读取数据库

url=url+"?q="+str

url=url+"&sid="+Math.random() //Math对象的random方法，取随机数

xmlHttp.onreadystatechange=stateChanged //设置当XMLHttpRequest对象xmlHttp状态改变时调用的函数,注意函数名后不要添加小括号

xmlHttp.open("GET",url,true) //使用XMLHttpRequest对象的open()方法 , 创建HTTP请求

xmlHttp.send(null) //使用XMLHttpRequest对象的open()方法 , 发送HTTP请求

}

//函数showMenu(str) - 功能函数1

function showMenu2(str)

{

xmlHttp2=GetXmlHttpObject() //调用GetXmlHttpObject()函数，创建XMLHttpRequest对象

if (xmlHttp2==null) //如果创建失败，则 alert ("Browser does not support HTTP Request")

return

var url="get2.php" //定义url , 其主要读取数据库

url=url+"?q2="+str

url=url+"&sid="+Math.random() //Math对象的random方法，取随机数

xmlHttp2.onreadystatechange=stateChanged2 //设置当XMLHttpRequest对象xmlHttp状态改变时调用的函数,注意函数名后不要添加小括号

xmlHttp2.open("GET",url,true) //使用XMLHttpRequest对象的open()方法 , 创建HTTP请求

xmlHttp2.send(null) //使用XMLHttpRequest对象的open()方法 , 发送HTTP请求

}

//函数BuildSel() , 根据返回的的字串 , 重新构建新的下拉菜单控件Select - 功能函数2

function BuildSel(str,sel) //先清空原来的数据.

sel.options.length=0; var arrstr = new Array(); arrstr = str.split(",");

if(str.length>0) //循环

for(var i=0;i<arrstr.length;i++) var subarrstr=new Array(); subarrstr=arrstr[i].split("|");

sel.options.add(new Option(subarrstr[1],subarrstr[0])); sel.options[0].selected=true; }

//函数stateChanged() - 响应HTTP请求状态变化

function stateChanged()

//判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成(注意:异步调用完成 不代表 异步调用成功)

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

//如果异步调用成功 --> XMLHttpRequest对象的status属性值为200 , html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlHttp.status==0

if(xmlHttp.status==200 || xmlHttp.status==0) //调用文档对象模型DOM的getElementById()方法查找html文件中的标签txtHint ,

//innerHTML为IE浏览器中的属性,可以用来更改标签间文本的内容 ,

//xmlHttp.responseText , 通过XMLHttpRequest的responseText属性来获取数据 responseText,结果为字符串;responseXML,结果为XML形式

// document.getElementByIdx_x_xx_x_xx("txtHint").innerHTML=xmlHttp.responseText

BuildSel(xmlHttp.responseText,document.getElementsByTagName_r("*").sel2)

showMenu2(document.getElementsByTagName_r("*").sel2.value); }

}

//函数stateChanged() - 响应HTTP请求状态变化

function stateChanged2()

//判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成(注意:异步调用完成 不代表 异步调用成功)

if (xmlHttp2.readyState==4 || xmlHttp2.readyState=="complete")

//如果异步调用成功 --> XMLHttpRequest对象的status属性值为200 , html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlHttp.status==0

if(xmlHttp2.status==200 || xmlHttp2.status==0) //调用文档对象模型DOM的getElementById()方法查找html文件中的标签txtHint ,

//innerHTML为IE浏览器中的属性,可以用来更改标签间文本的内容 ,

//xmlHttp.responseText , 通过XMLHttpRequest的responseText属性来获取数据 responseText,结果为字符串;responseXML,结果为XML形式

// document.getElementByIdx_x_xx_x_xx("txtHint").innerHTML=xmlHttp.responseText

BuildSel(xmlHttp2.responseText,document.getElementsByTagName_r("*").sel3) }

}

//函数GetXmlHttpObject() - 创建XMLHttpRequest对象,即创建一个异步调用对象

function GetXmlHttpObject() var xmlHttp=null;

try // Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest(); catch (e) //Internet Explorer

try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); catch (e) xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }

return xmlHttp; -->

get2.php

<?php header('Content-Type:text/html;charset=GB2312'); $conn = mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());

mysql_select_db('fitment', $conn) or die ('Can't use database : ' . mysql_error());

mysql_query("set names 'gb2312'");

//如果传递过来q

if($_GET["q"]){

$strs = "SELECT * FROM fitment_sort WHERE supid=' ".$_GET["q"]."' ";

//echo $str;

$results = mysql_query($strs) or die("Invalid query: " . mysql_error());

if($results) while ($arrs = mysql_fetch_array($results)){

$strings .= $arrs["id"]."|".$arrs["name"].","; }

echo substr($strings,0,strlen($strings)-1); }

//如果传递过来q2

if($_GET["q2"]){

$str = "SELECT * FROM fitment_sort WHERE supid= '".$_GET["q2"]."'";

//echo $str;

$result = mysql_query($str) or die("Invalid query: " . mysql_error());

if($result) while ($arr = mysql_fetch_array($result)){

$string .= $arr["id"]."|".$arr["name"].","; } echo substr($string,0,strlen($string)-1); }

mysql_close($conn);

?>

本文刊载的所有内容，包括文字、图片、音频、视频、软件、程序、以及网页版式设计等部门来源于互联网，版权均归原作者所有！本网站提供的内容服务于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。
联系信息：邮箱aoxolcom@163.com或见网站底部。

THE END