频道导航

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

2019-01-04 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery+PHP+MySQL实现无限级联下拉框效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

图1 仅下拉框

图2 层级提示+下拉框

图3 存储数据点击响应

主要包含3个文件：index.html（主页），wuxianjilian.PHP（数据处理），wuxianjilian.sql（MysqL数据文件） 1. index.html

无限级联

<input type="button" value="存储数据" id="save">
<script type="text/javascript">
$(document).ready(function(){
$("#save").click(function(){
var data = [];
$(".selection").each(function(){
data.push($.trim($(this).val()));
})

alert(data.join(','));
});
});

2. wuxianjilian.PHP

PHP;"> PHP header("Content-type: text/html; charset=utf-8");

//数据库连接操作
$conn = MysqL_connect("localhost","Zjmainstay","") or die("Can not connect to database.Fatal error handle by ". FILE);
MysqL_select_db("test",$conn); //数据库名为 test
MysqL_query("SET NAMES utf8",$conn);

//获取父级id
$pid = (int)$_POST['pid'];

//查询子级
$sql = "SELECT id,text FROM wuxianjilian WHERE pid={$pid}";
$result = MysqL_query($sql,$conn);

//组装子级下拉菜单
$html = '';
while($row = MysqL_fetch_assoc($result)){
$html .= '<option value="'.$row['id'].'">'.$row['text'].'';
}

if(!empty($html)) $html = '<select class="selection"><option value="">请选择' . $html . '';

//输出下拉菜单
echo jsonencode($html);
//EndPHP

3. wuxianjilian.sql

sql;"> wuxianjilian.sql /* Navicat MysqL Data Transfer

Source Server : localhost
Source Server Version : 50516
Source Host : localhost:3306
Source Database : test

Target Server Type : MysqL
Target Server Version : 50516
File Encoding : 65001

Date: 2012-10-24 20:59:09
*/

SET FOREIGN_KEY_CHECKS=0;

-- Table structure for wuxianjilian

DROP TABLE IF EXISTS wuxianjilian;
CREATE TABLE wuxianjilian (
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;

-- Records of wuxianjilian

INSERT INTO wuxianjilian VALUES ('1','0','A0');
INSERT INTO wuxianjilian VALUES ('2','B0');
INSERT INTO wuxianjilian VALUES ('3','1','C1');
INSERT INTO wuxianjilian VALUES ('4','D1');
INSERT INTO wuxianjilian VALUES ('5','E1');
INSERT INTO wuxianjilian VALUES ('6','2','F2');
INSERT INTO wuxianjilian VALUES ('7','G2');
INSERT INTO wuxianjilian VALUES ('8','3','H3');
INSERT INTO wuxianjilian VALUES ('9','I3');
INSERT INTO wuxianjilian VALUES ('10','J3');
INSERT INTO wuxianjilian VALUES ('11','K3');
INSERT INTO wuxianjilian VALUES ('12','4','L4');
INSERT INTO wuxianjilian VALUES ('13','M4');
INSERT INTO wuxianjilian VALUES ('14','8','N8');
INSERT INTO wuxianjilian VALUES ('15','9','N9');
INSERT INTO wuxianjilian VALUES ('16','14','O14');
INSERT INTO wuxianjilian VALUES ('17','P14');
INSERT INTO wuxianjilian VALUES ('18','Q14');
INSERT INTO wuxianjilian VALUES ('19','17','R17');
INSERT INTO wuxianjilian VALUES ('20','S18');
INSERT INTO wuxianjilian VALUES ('21','20','T20');