php实现三级级联下拉框


Posted in PHP onApril 17, 2016

这是我在网上查找到的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);
?>

以上就是php实现三级级联下拉框的相关代码,希望对大家学习php程序设计有所帮助。

PHP 相关文章推荐
中篇:安装及配置PHP
Dec 13 PHP
一个简单的PHP&amp;MYSQL留言板源码
Jul 19 PHP
MayFish PHP的MVC架构的开发框架
Aug 13 PHP
PHP获取数组中某元素的位置及array_keys函数应用
Jan 29 PHP
VIM中设置php自动缩进为4个空格的方法详解
Jun 14 PHP
phpstrom使用xdebug配置方法
Dec 17 PHP
php多文件上传实现代码
Feb 20 PHP
ThinkPHP模板Switch标签用法示例
Jun 30 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
Feb 14 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
Apr 21 PHP
Laravel中log无法写入问题的解决
Jun 17 PHP
laravel5 Eloquent 实现事务方式
Oct 21 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
Apr 17 #PHP
orm获取关联表里的属性值
Apr 17 #PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
Apr 15 #PHP
php基于jquery的ajax技术传递json数据简单实例
Apr 15 #PHP
PHP6连接SQLServer2005的三部曲
Apr 15 #PHP
php使用pear_smtp发送邮件
Apr 15 #PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
Apr 15 #PHP
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JS交换变量的方法
2015/01/21 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
前端微信支付js代码
2016/07/25 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python实现自动重启本程序的方法
2015/07/09 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python松散正则表达式用法分析
2016/04/29 Python
如何在python中使用selenium的示例
2017/12/26 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
电子专业自荐信
2014/07/01 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
react 路由Link配置详解
2021/11/11 Javascript
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android