PHP+MySQL实现二级联动下拉列表
（实用篇）jQuery+PHP+MySQL实现二级联动下拉菜单
（实⽤篇）jQuery+PHP+MySQL实现⼆级联动下拉菜单⼆级联动下拉菜单选择应⽤在在很多地⽅，⽐如说省市下拉联动，商品⼤⼩类下拉选择联动。
本⽂将通过实例讲解使⽤jQuery+PHP+MySQL来实现⼤⼩分类⼆级下拉联动效果。
先看下效果实现的效果就是当选择⼤类时，⼩类下拉框⾥的选项内容也随着改变。
实现原理：根据⼤类的值，通过jQuery把值传给后台PHP处理，PHP通过查询MySQl数据库，得到相应的⼩类，并返回JSON数据给前端处理。
XHTML⾸先我们要建⽴两个下拉选择框，第⼀个是⼤类，第⼆个是⼩类。
⼤类的值可以是预先写好，也可以是从数据库读取。
<label>⼤类：</label><select name="bigname" id="bigname"><option value="1">前端技术</option><option value="2">程序开发</option><option value="3">数据库</option></select><label>⼩类：</label><select name="smallname" id="smallname"></select>jQuery先写⼀个函数，获取⼤类选择框的值，并通过$.getJSON⽅法传递给后台server.php，读取后台返回的JSON数据，并通过$.each⽅法遍历JSON数据，将对应的值写⼊⼀个option字符串，最后将option追加到⼩类⾥。
function getSelectVal(){$.getJSON("server.php",{bigname:$("#bigname").val()},function(json){var smallname = $("#smallname");$("option",smallname).remove(); //清空原有的选项$.each(json,function(index,array){var option = "<option value='"+array['id']+"'>"+array['title']+"</option>";smallname.append(option);});});}注意，在遍历JSON数据追加之前⼀定要先将⼩类⾥的原有的项清空。
二级下拉菜单自动联动公式
二级下拉菜单自动联动公式
当然，这次我会尝试用更口语化、更随性的方式来写这些段落：段落一：
你知道吗，春风一吹，万物都好像醒了过来。
二级下拉菜单的
自动联动功能也是这样，轻轻一点，就帮你找到了想要的东西。
就
像那山间的小野花，虽然不起眼，但总能带给你惊喜。
段落二：
现在的时代，谁不想快点搞定事情呢？二级下拉菜单的自动联
动功能，就像是你的贴心小助手，你刚选了一个选项，它就已经帮
你准备好了下一个。
真是省时又省力，让人忍不住想点个赞！
段落三：
说到网页设计，有个小技巧你可能不知道。
那就是二级下拉菜
单的自动联动功能。
它不仅能让你的网站看起来更酷，还能帮你吸
引更多的访客。
就像你在网上购物，它总能推荐出你感兴趣的东西，
让你越逛越开心。
段落四：
说到电商，我得提一下这个自动联动功能。
你正在看一件衣服，它就能推荐出搭配的鞋子和包包。
简直是购物神器啊！不仅让你购
物更方便，还能帮你省钱。
下次网购，一定要试试看！
这些段落都很口语化，而且语言风格各异，希望能满足你的要求。
asp二级联动下拉菜单
</tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>会员登录</title>
</head>
<body>
<script language ="javascript" >
<td height="30" bgcolor="#D4D0C8"><select size="1" name="Region" onchange ="changeselect(document.form1.Region.options[document.form1.Region.selectedIndex].value)">
set rs = conn.execute(sql)
while not rs.eof
msg = msg & "<option value=""" & rs("id") & """>" & rs("class1") & "</option>"
PHPAJAX2级联动下拉列表（...
PHPAJAX2级联动下拉列表（...PHP+AJAX2级联动下拉列表（简单好用）这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。
废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：var http_request=false;function send_request(url){//初始化，指定处理函数，发送请求的函数http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器http_request=new XMLHttpRequest();if(http_request.overrideMimeType){//设置MIME类别http_request.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//IE浏览器try{http_request=new ActiveXObject("Msxml2.XMLHttp");}catch(e){try{http_request=new ActiveXobject("Microsoft.XMLHttp");}catch(e){}}}if(!http_request){//异常，创建对象实例失败window.alert("创建XMLHttp对象失败！");return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式，URL，及是否同步执行下段代码http_request.open("GET",url,true);http_request.send(null);}//处理返回信息的函数function processrequest(){if(http_request.readyState==4){//判断对象状态if(http_request.status==200){//信息已成功返回，开始处理信息document.getElementById(reobj).innerHTML=http_request.respons eText;}else{//页面不正常alert("您所请求的页面不正常！");}}}function getclass(obj){var pid=document.form1.select1.value;document.getElementById(obj).innerHTML="<option>loading...</o ption>";send_request(‘doclass.php?pid=‘+pid);reobj=obj;}这个程序的核心就是动态添加<option>......</option>服务器端是进行数据的检索，很简单：<?phpheader("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码$pid=$_GET[‘pid‘];$db=mysql_connect("localhost","root","7529639"); //创建数据库连接mysql_query("set names ‘GBK‘");mysql_select_db("menuclass");$sql="select classname from menu where parentid=".$pid."";$result=mysql_query($sql);//循环列出选项while($rows=mysql_fetch_array($result)){echo ‘<option>‘;echo $rows[‘classname‘];echo "</option>\n";}>再看看列表页面的html：<script language="javascript" src="ajaxmenu.js"></script><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ajax2级联动菜单演示</title></head><body><form name="form1"><select name="select1" id="class1" style="width:100;" onChange="getclass(‘class2‘);"><option selected="selected"></option><option value="1">大类1</option><option value="2">大类2</option></select><select name="select2"id="class2" style="width:100;"></select></form></body></html>附件1.jpg(1.99 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表2.jpg(3.25 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表3.jpg(5.92 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表4.jpg(5.62 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表ajaxdemo.rar(1.66 KB)2007-9-24 10:05, 下载次数: 3PHP+AJAX2级联动下拉列表搜索更多相关主题的帖子: AJAX PHP列表台州南开技术小组专门用PHP+MYSQL技术进行Web(网站、平台、系统等)开发，凭借其开发产品的非凡速度、领先的技术优势、富于创新的开发团队，为众多行业门户、专业型站点提供最有优质的服务和技术保障。
php+mysql实现二级联动下拉列表
php+mysql实现⼆级联动下拉列表⼆级联动下拉列表（select）,都是从数据库中取值，其中第⼆级为可多选列表（multiple）.若要实现⼆级也是下拉菜单，可以将multiple改了即可。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>全动态⼆级联动下拉列表</title></head><body><?/************************************************* 功能：PHP+mysql实现⼆级级联下拉框** 数据库：数据库名（db_city）、数据表（t_province、t_city）** 表t_province中字段：id（id编号）、provinceName（省份名）** 表t_city中的字段：id（id编号）、provinceId（省份ID）、cityName（城市名）***********************************************///****************** 连接选择数据库 ***************$link = mysql_connect("localhost", "root", "123")or die("Could not connect : " . mysql_error());mysql_select_db("db_city") or die("Could not select database");//******************提取省份信息******************$sqlSel = "select * from t_province order by id ";$result = mysql_query($sqlSel) or die("Query failed : " . mysql_error());$forum_data = array();while( $row = mysql_fetch_array($result) ){$forum_data[] = $row;}//print_r ($forum_data);mysql_free_result($result);//**************获取城市信息**************$sqlSel2 = "select * from t_city order by provinceId desc";if( !($result2 = mysql_query($sqlSel2)) ){die('Could not query t_city list');}$forum_data2 = array();while( $row2 = mysql_fetch_array($result2) ){$forum_data2[] = $row2;}mysql_free_result($result2);><!--************ JavaScript处理province--onChange *************--><script language = "JavaScript">var onecount2;subcat2 = new Array();<?php$num2 = count($forum_data2);>onecount2=<?echo $num2;?>;<?for($j=0;$j<$num2;$j++){>subcat2[<?echo $j;?>] = new Array("<?echo $forum_data2[$j]['id'];?>","<?echo $forum_data2[$j]['provinceId'];?>","<?echo $forum_data2[$j] ['cityName'];?>");<?}?>function changelocation(id){document.myform.city.length = 0;var id=id;var j;document.myform.city.options[0] = new Option('==选择城市==','');for (j=0;j < onecount2; j++){if (subcat2[j][1] == id){document.myform.city.options[document.myform.city.length] = new Option(subcat2[j][2], subcat2[j][0]);}}}</script><!--********************页⾯表单*************************--><form name="myform" method="post">地址：<select name="bigClass"onChange="changelocation(document.myform.bigClass.options[document.myform.bigClass.selectedIndex].value)" size="1"> <option selected>请选择省份</option><?php$num = count($forum_data);for($i=0;$i<$num;$i++){><option value="<?echo $forum_data[$i]['id'];?>"><?echo $forum_data[$i]['provinceName'];?></option><?}></select><select name="city" multiple><SELECT name=city size=1 id="city"><option selected value="">==选择城市==</option></select></form></body></html>。
二级联动
为了在窗体显示时去除列表框的重复值和空格，可以使用Add方法，如下面的代码所示。
#001 Private Sub UserForm_Initialize()#002 On Error Resume Next#003 Dim ColAs New Collection#004 Dim rng As Range, arr#005 Dim iAs Integer#006 For Each rng In Range("A1:A" & [a65536].End(xlUp).Row)#007 If Trim(rng) <> "" Then#008 Col.Addrng, key:=CStr(rng)#009 End If#010 Next#011 ReDimarr(1 To Col.Count)#012 Fori = 1 To Col.Count#013 arr(i) = Col(i)#014 Next#015 Me.ListBox1.List = arr#016 End Sub代码解析：窗体的初始化事件，去除列表框引用工作表数据中的重复值和空格。
第2行代码，错误处理语句，忽略错误。
第3行到第5行代码，声明变量类型。
第6行到第9行代码代码，在列表框引用的工作表数据中循环，把工作表数据源中的空格去除后使用Add方法添加到变量Col中。
Add方法添加一个成员到Collection 对象，语法如下：object.Add item, key, before, after参数object是必需的，一个有效的对象。
参数Item是必需的，任意类型的表达式，指定要添加到集合中的成员。
参数Key是可选的，唯一字符串表达式，指定可以使用的键字符串，代替位置索引来访问集合中的成员。
如果指定的key和集合中现有成员的key发生重复，则会导致错误发生。
所以在第2行代码中使用错误处理语句，忽略错误，继续执行下一句代码，这样就将数据源中的重复值去除。
Domino下拉框的二级联动菜单
下拉框的二级联动菜单第一有两个联动菜单，如以下图：咱们此刻要依照SampleType的值来改变SampleName的值。
咱们先看一下视图的结构咱们通过ajax从后台获取xml，然后放到SampleName里面：当SampleType的值改变时咱们挪用addSampleNamebyajax方式：Javascript：//通过ajax动态加载样品名称function addSampleNamebyajax(samplevalue){try{var uri = "";uri = "&SampleType=" + samplevalue + "&ids=" + Math.random();var loader = dhtmlxAjax.getSync("<计算的值>Agent_getSapmleNameByAjax?OpenAgent" + uri);cResponseSampleName(loader);}catch(err){alert(err.description);}}//回调函数function cResponseSampleName(loader){try{if(loader.xmlDoc.responseXML != null){//清除数据document.getElementById("SampleName").options.length = 1;//获取ajax的xml数据var xmlDoc = loadXMLDoc(loader.xmlDoc.responseXML);var temp = xmlDoc.getElementsByTagName("cell");for(i=0;i<temp.length;i++){tempStr = temp[i].childNodes[0].nodeValueoption = new Option(tempStr,tempStr)document.getElementById("SampleName").add(option);}}}catch(err){alert(err.description)}}function loadXMLDoc(dname){try{xmlDoc=new ActiveXObject("Microsoft.XMLDOM");}catch(e){try{xmlDoc=document.implementation.createDocument("","",null);}catch(e){alert(e.message)}}try {xmlDoc.async=false;xmlDoc.load(dname);return(xmlDoc);}catch(e) {alert(e.message)}return(null);}L OTUSSCRIPT：S UB I NITIALIZE'M SGBOX "-----------------------"O N E RROR G OTO HANDLED IM SESSION A S N EW N OTES S ESSIOND IM CURDOC A S N OTES D OCUMENTD IM INPUT S TR A S S TRINGD IM VIEW A S N OTES V IEWD IM CURDB A S N OTES D ATABASED IM TEMPDOC A S N OTES D OCUMENTD IM DC A S N OTES D OCUMENT C OLLECTIOND IM S AMPLE N AME A S S TRINGD IM OUPUT S TR A S S TRINGS ET CURDB = SESSION.C URRENT D ATABASES ET CURDOC = SESSION.D OCUMENT C ONTEXT'INPUT S TR = CURDOC.G ET I TEM V ALUE("Q UERY_S TRING_D ECODED")(0)INPUT S TR = G ET P ARAMETER("S AMPLE T YPE",CURDOC.G ET I TEM V ALUE("Q UERY_S TRING_D ECODED")(0))'M SGBOX INPUT S TRS ET VIEW = CURDB.G ET V IEW("V IEW_ZNNYSC_S AMPLE T YPE")S ET DC = VIEW.G ET A LL D OCUMENTS B Y K EY(INPUT S TR +"|"+ INPUT S TR,T RUE)M SGBOX DC.C OUNTS ET TEMPDOC = DC.G ET F IRST D OCUMENTOUTPUT S TR ={<ROW>}W HILE N OT TEMPDOC I S N OTHINGS AMPLE N AME = TEMPDOC.S AMPLE T YPE N AME(0)OUTPUT S TR = OUTPUT S TR +{<CELL>}+S AMPLE N AME +{</CELL>}M SGBOX S AMPLE N AMES ET TEMPDOC = DC.G ET N EXT D OCUMENT(TEMPDOC)W ENDOUTPUT S TR = OUTPUT S TR +{</ROW>}P RINT {C ONTENT-T YPE:TEXT/XML;CHARSET=UTF-8}P RINT OUTPUT S TRE XIT S UBHANDLE:M SGBOX E RL &E RROR$E XIT S UBE ND S UB最后：咱们需要在SampleName的公式中加上页面打开时获取的值：如此就完成下拉框二级联动了。
二级联动设置
二级联动设置二级联动设置是指在一个系统或者一个模型中，通过两个或多个级别的选择来实现不同参数或条件的联动变化。
这种设置在实际应用中非常常见，可以用于各种场景，比如网页筛选、数据分析、系统配置等等。
下面将以网页筛选为例，来说明二级联动设置的实现和应用。
在网页筛选中，二级联动设置可以用于根据用户的选择来实时更新筛选结果。
比如在一个商品列表页面，用户可以通过选择商品类型和品牌来筛选商品。
当用户选择了商品类型后，品牌的选项应该根据商品类型的选择动态更新，只显示与所选类型相关的品牌选项。
这就是二级联动设置的一个典型应用。
为了实现二级联动设置，需要在网页的前端代码中编写相应的逻辑。
首先，需要在页面上定义两个下拉框或者多个选择框，用来让用户选择参数。
其次，需要定义一个数据结构来存储各个选项的关联关系。
比如，可以使用一个嵌套的字典来表示不同选项之间的关系。
最后，在用户选择参数的时候，需要根据选择的参数来更新关联的选项。
具体来说，首先需要在页面上定义两个下拉框，一个用来选择商品类型，一个用来选择品牌。
在选择商品类型的下拉框中，需要绑定一个事件，当用户选择了某个类型的商品时，触发该事件。
在事件中，需要根据选择的商品类型来更新品牌的选项。
具体的更新逻辑可以通过查询事先定义好的关联关系数据结构来实现。
比如，当用户选择了某个商品类型时，可以从关联关系数据结构中找到与该类型相关的品牌选项，并更新品牌下拉框中的选项。
通过这样的设置，用户就可以根据自己的需求来筛选商品了。
当用户选择了某个商品类型后，品牌选项会根据选择的类型进行动态更新，只显示与所选类型相关的品牌选项。
这样，用户可以更加方便地找到自己需要的商品。
除了网页筛选，二级联动设置还可以应用于其他场景。
比如，在一个数据分析系统中，可以通过选择不同的参数来实时更新数据的展示。
在一个系统配置页面中，可以通过选择不同的配置项来实时更新系统的设置。
总之，二级联动设置是一种非常实用的功能，可以提高用户的交互体验，并使系统更加灵活和易用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
PHP+MySQL实现二级联动下拉列表
1.Javascript在下拉列表的各个对象
2.案例代码
Liandong.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP二级联动测试</title>
</head>
<body>
<?php
$link=mysql_connect("localhost","root","12345678") or die("Could not connect：".mysql_error());
mysql_select_db("phpquery") or die("Could not select database or database haven't created");
//获取大类别
$queryCol="select*from tb_firstcategory order by id";
mysql_query("set names utf-8");
$result1=mysql_query($queryCol) or die("Query failed:".mysql_error());
$firstcategories=array();
while($row1=mysql_fetch_array($result1)){
$firstcategories[]=$row1;
}
mysql_free_result($result1);
//获取小类别
$querySecondCat="select*from tb_secondcategory order by fid desc";
mysql_query("set names utf-8");
if(!($result2=mysql_query($querySecondCat))){
die("Cound not query tb_secondcategory list");
}
$secondcategories=array();
while($row2=mysql_fetch_array($result2)){
$secondcategories[]=$row2;
}
mysql_free_result($result2);
?>
<script language="javascript">
var secondcategoryCount;
//存储小类别的数据
form_secondcategory=new Array();
<?php
$num2=count($secondcategories); //获取小类别表中记录的个数?>
secondcategoryCount=<?php echo $num2;?>;
<?php
for($j=0;$j<$num2;$j++){ //从0开始取出上面小类别数据填充的数组
?>
form_secondcategory[<?php echo $j;?>]=new Array("<?php echo $secondcategories[$j]['id'];?>","<?php echo $secondcategories[$j]['fid'];?>","<?php echo $secondcategories[$j]['categoryname'];?>");
<?php } ?>
function changeFirstCate(fid){
document.form1.secondcategory.length=0;
var id=id;
var j;
for(j=0;j<secondcategoryCount;j++){
if(form_secondcategory[j][1]==fid){ //fid等于大类别的id document.form1.secondcategory.options[document.form1.secondcategory.length]=n ew Option(form_secondcategory[j][2],form_secondcategory[j][0]);
}else{
document.form1.secondcategory.options[0]=new Option('==选择小类别==',""); //label的value为空’’
}
}
}
//获取选中的列表文本
function getCategory(){
var first=document.getElementById("firstcategory");
var index=first.selectedIndex;
var second=document.getElementById("secondcategory");
var index1=second.selectedIndex;
alert(first.options[index].text+second.options[index1].text);
}
</script>
<form name="form1" method="post">
选择：<select id="firstcategory" name="firstcategory" onchange="changeFirstCate(document.form1.firstcategory.options[document.form1. firstcategory.selectedIndex].value)" size="1">
<option selected>==请选择大类别==</option>
<?php
$num=count($firstcategories);
for($i=0;$i<$num;$i++){
?>
<option value="<?php echo $firstcategories[$i]['id'];?>"><?php echo $firstcategories[$i]['categoryname'];?></option>
<?php
}
?>
</select>
<select id="secondcategory" name="secondcategory">
<option selected value="">==选择小类别==</option>
</select>
<input type="button" name="submit" value="提交" onclick="getCategory();"/>
</form>
<div id="rel" style="display:none;"></div>
</body>
</html>。