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);
?>
以上就是php实现三级级联下拉框的相关代码，希望对大家学习php程序设计有所帮助。
相关推荐
-
利用php+mcDropdown实现文件路径可在下拉框选择
最近用php进行文件目录信息读取,在网上弄到下面一段代码://获取指定目录下的文件列表//$path 指定的目录,默认为当前目录//$ifchild 是否显示子目录文件列表,默认不显示//$curpath 显示当前的路径,默认为从当前目录开始:这个主要是为了显示确定href路径 复制代码 代码如下: function openpath($path=".",$ifchild=false,$curpath=".") { $handle = opendir($p
-
jQuery+PHP+MySQL实现无限级联下拉框效果
本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下 效果图: 图1 仅下拉框 图2 层级提示+下拉框 图3 存储数据点击响应 主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Content
-
php 三级联动菜单
数据库结构 复制代码 代码如下: -- 表的结构 `bigclass` -- CREATE TABLE `bigclass` ( `bigclassid` int(11) NOT NULL auto_increment, `bigclassname` varchar(200) collate utf8_unicode_ci NOT NULL, `sort` int(11) NOT NULL, `suoshu` int(1) NOT NULL, PRIMARY KEY (`bigclassid`)
-
php递归实现无限分类生成下拉列表的函数
复制代码 代码如下: /*------------------ */ //– 递归实现无限分类生成下拉列表函数 //– $tpl->assign('sort_list',createSortOptions ()); //– $tpl->assign('sort_list',createSortOptions ($sort_id)); /*------------------ */ function createSortOptions ($selected=0,$parent_id=0,$n=-
-
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给出省份:河南省(sf_id=1) 浙江省(sf_id=2),而地市和学生信息则分别建立两张数据表!编码方式均为:utf8!新建数据库并执行以下SQL语句! 复制代码 代码如下: /* 地市表 */ create TABLE IF NOT EXISTS `dishi`( `ds_id` int(3)
-
php+ajax做仿百度搜索下拉自动提示框(有实例)
php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
php 获取select下拉列表框的值
给select 表单无素一个名字. 表单提交后 用 $_POST 或 $_GET 方式提交 $_POST['sel']或者$_GET['sel']获得选中的select的value值 复制代码 代码如下: if( $_POST ) { echo $_POST['select']; } ?> <form name="form1" enctype="multipart/form-data" method="post" action=&qu
-
php实现三级级联下拉框
这是我在网上查找到的php实现三级级联下拉框的资料,共享个大家,大家一起进步,具体内容如下 index.php: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Ajax联动菜单</title> <script language="javascript"
-
javascript省市区三级联动下拉框菜单实例演示
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl
-
Android使用Spinner实现城市级联下拉框
最近写一个使用Spinner实现城市级联下拉框的Dome,现在总结一下,第一次写博客,互相学习. activity_main.xml里面有三个Spinner <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_
-
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别. select单选实例: <select v-model="fruit"> <option selected valu
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
基于jquery的无限级联下拉框js插件
灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉
-
ASP.NET实现级联下拉框效果实例讲解
用ASP.NET控件实现部门和员工的联动,参考过程如下 效果图: Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199
-
jQuery实现级联下拉框实战（5）
今天来完成jQuery实战的级联下拉框效果.效果功能如下: 页面默认只提供汽车厂商,当选择了具体的某品牌汽车,汽车类型下拉框就会动态的显示出来,选择对应的类型,然后出来该汽车类型对应的轮胎类型下拉框显示出来,选中轮胎类型,页面的正中间会显示出汽车的图片. 思路分析如图: 建立我们的html页面,程序清单如下: 代码清单1.1: chainSelect.jsp <body> <div class="loading"> <p><img src=&q
-
JQuery实现级联下拉框效果实例讲解
用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下 效果图: 逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&