这是我在网上查找到的php实现三级级联下拉框的资料,共享个大家,大家一起进步,具体内容如下
index.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
< 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!--
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?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 );
?>
|
以上就是php实现三级级联下拉框的相关代码,希望对大家学习php程序设计有所帮助。