jQuery PHP MySQL实现无限级联下拉框效果

本文简单实现jQuery无限级联效果，分享给大家供大家参考，具体内容如下效果图：

图一仅下拉框

图2层级提示下拉框

图3存储数据点击响应

主要包含3个文件：index.html(主页)，wuxianjilian.php(数据处理)，伍新建。SQL(MySQL数据文件)1.index.html

htmlhead标题无限级联/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/meta http-equiv=' Content-Language ' Content=' zh-CN '/脚本类型=' text/JavaScript ' src=' http :http://文件。CN博客。com/ZJ中流砥柱/jquery-1。6 .2 .量滴js '/script/headdydiv id=' jilianContainer '/div script type=' text/JavaScript ' $(文档)。ready(function(){ var getData=function(obj){ $ } .Ajax({ URL : ' Wu新建。PHP '，type:'POST '，data:{'pid':obj.val()}，dataType:'json '，async:false，success : function(data){ if($).选择')。长度){ $(.选择： gt($(obj)).index()')').移除();//移除后面所有子级下拉菜单$(.选择：最后一个').后（数据);//添加子级下拉菜单}else { $('#jilianContainer ').追加（数据);//初始加载情况} //所有下拉响应$('.选择')。解除绑定()。change(function(){ getData($(this))；});}，错误：函数(msg){ alert(' error ')；} });}//Init getData($(this))；});/脚本！-数据存储示例，仅提取数据，不做操作-div style=' height :100 px；display : block/' divinput type=' button ' value='存储数据id=' save '/输入脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('#save ')).单击(function(){ var data=[]；$('.选择')。每个（函数(){ data.push($).修剪($(这个)。val()))；}) alert(data.join('，')；});});/脚本/正文/html2 .wuxianjilian.php

？服务器端编程语言（Professional Hypertext Preprocessor的缩写）标题('内容类型：文本/html；charset=utf-8 ')；//数据库连接操作$conn=mysql_connect('localhost '，' zjstank '，')或' die('无法连接到数据库。由""处理的致命错误_ _ FILE _ _)；mysql_select_db('test '，$ conn)；//数据库名为test mysql_query('SET NAMES utf8 '，$ conn)；//获取父级id $ PID=(int)$ _ POST[' PID ']；//查询子级$sql='SELECT id，text FROM新建` WHERE PID={ $ PID } '；$result=mysql_query($sql，$ conn)；//组装子级下拉菜单$ html=while($ row=MySQL _ fetch _ assoc($ result)){ $ html .='选项值=' '。$row['id']' '。$row['text']./option '；} if(！空($ html))$ html=' select class=' selection '选项值=' '请选择/option ' .$html ./select '；//输出下拉菜单echo JSON _ encode($ html)；//End_php3 .wuxianjilian.sql

wuxianjilian.sql/*Navicat MySQL数据传输源服务器：本地主机源服务器版本： 50516源主机：本地主机33603306源数据库：测试目标服务器类型： MySQL目标服务器版本： 50516文件编码： 65001数据： 2012-10-24 20:59336009 */SET FOREIGN _ date-"五仙莲"的表结构-"五仙莲"存在时删除表；CREATE TABLE新建`(` id ' int(11)NOT NULL AUTO _ INCREMENT，` PID ' int(11)DEFAULT NULL，` text ' varchar(32)DEFAULT NULL，PRIMARY KEY(` id `))ENGINE=InnoDB AUTO _ INCREMENT=22 DEFAULT CHARSET=utf8；- -吴县连的记录- -插入"吴县连"值(“1”、“0”、“A0”)；插入"五元连"值(“2”、“0”、“B0”)；插入"武侠"价值观(“3”、“1”、“C1”)；插入"五言两语"值(“4”、“1”、“D1”)；插入"五言两语"值(‘5’、‘1’、‘E1’)；插入"五个一连"值(“6”、“2”、“F2”)；插入"五颜六色"值(“7”、“2”、“G2”)；插入"武侠"价值观(“8”、“3”、“H3”)；插入"五元连"值(“9”、“3”、“I3”)；插入"武侠"价值观(“10”、“3”、“JBOY3乐队");插入"五元连"值(“11”、“3”、“K3”)；插入"五个一连"值(“12”、“4”、“L4”)；插入"武侠"价值观(“13”、“4”、“M4”)；插入"武侠"价值观(“14”、“8”、“N8”)；插入"吴县连"值(' 15 '，' 9 '，' N9 ')；插入"五个一连"值(“16”、“14”、“O14”)；插入"武侠"价值观(“17”、“14”、“P14”)；插入"五个一连"值(“18”、“14”、“Q14”)；插入"五重连"值(' 19 '，' 17 '，' R17 ')；插入"五个一连"值(“20”、“17”、“S18”)；插入"五个一连"值(“21”、“20”、“T20”)；如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

希望本文所述对大家学习jquery程序设计有所帮助。