jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
本文簡(jiǎn)單實(shí)現(xiàn)jQuery無(wú)限級(jí)聯(lián)效果,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
圖1 僅下拉框
圖2 層級(jí)提示+下拉框
圖3 存儲(chǔ)數(shù)據(jù)點(diǎn)擊響應(yīng)
主要包含3個(gè)文件:index.html(主頁(yè)),wuxianjilian.php(數(shù)據(jù)處理),wuxianjilian.sql(MySQL數(shù)據(jù)文件)
1. index.html
<html> <head> <title>無(wú)限級(jí)聯(lián)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script> </head> <body> <div id="jilianContainer"></div> <script type="text/javascript"> $(document).ready(function(){ var getData = function(obj){ $.ajax({ url:'wuxianjilian.php', type:'POST', data:{"pid":obj.val()}, dataType:'json', async:false, success:function(data){ if($(".selection").length){ $(".selection:gt("+$(obj).index()+")").remove(); //移除后面所有子級(jí)下拉菜單 $(".selection:last").after(data); //添加子級(jí)下拉菜單 }else { $("#jilianContainer").append(data); //初始加載情況 } //所有下拉響應(yīng) $(".selection").unbind().change(function(){ getData($(this)); }); }, error:function(msg){ alert('error'); } }); } //Init getData($(this)); }); </script> <!-- 數(shù)據(jù)存儲(chǔ)示例,僅提取數(shù)據(jù),不做操作 --> <div style="height:100px;display:block;"></div> <input type="button" value="存儲(chǔ)數(shù)據(jù)" id="save"></input> <script type="text/javascript"> $(document).ready(function(){ $("#save").click(function(){ var data = []; $(".selection").each(function(){ data.push($.trim($(this).val())); }) alert(data.join(',')); }); }); </script> </body> </html>
2. wuxianjilian.php
<?php header("Content-type: text/html; charset=utf-8"); //數(shù)據(jù)庫(kù)連接操作 $conn = mysql_connect("localhost","Zjmainstay","") or die("Can not connect to database.Fatal error handle by ". __FILE__); mysql_select_db("test",$conn); //數(shù)據(jù)庫(kù)名為 test mysql_query("SET NAMES utf8",$conn); //獲取父級(jí)id $pid = (int)$_POST['pid']; //查詢子級(jí) $sql = "SELECT id,text FROM `wuxianjilian` WHERE pid={$pid}"; $result = mysql_query($sql,$conn); //組裝子級(jí)下拉菜單 $html = ''; while($row = mysql_fetch_assoc($result)){ $html .= '<option value="'.$row['id'].'">'.$row['text'].'</option>'; } if(!empty($html)) $html = '<select class="selection"><option value="">請(qǐng)選擇</option>' . $html . '</select>'; //輸出下拉菜單 echo json_encode($html); //End_php
3. wuxianjilian.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', '0', 'B0'); INSERT INTO `wuxianjilian` VALUES ('3', '1', 'C1'); INSERT INTO `wuxianjilian` VALUES ('4', '1', 'D1'); INSERT INTO `wuxianjilian` VALUES ('5', '1', 'E1'); INSERT INTO `wuxianjilian` VALUES ('6', '2', 'F2'); INSERT INTO `wuxianjilian` VALUES ('7', '2', 'G2'); INSERT INTO `wuxianjilian` VALUES ('8', '3', 'H3'); INSERT INTO `wuxianjilian` VALUES ('9', '3', 'I3'); INSERT INTO `wuxianjilian` VALUES ('10', '3', 'J3'); INSERT INTO `wuxianjilian` VALUES ('11', '3', 'K3'); INSERT INTO `wuxianjilian` VALUES ('12', '4', 'L4'); INSERT INTO `wuxianjilian` VALUES ('13', '4', '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', '14', 'P14'); INSERT INTO `wuxianjilian` VALUES ('18', '14', 'Q14'); INSERT INTO `wuxianjilian` VALUES ('19', '17', 'R17'); INSERT INTO `wuxianjilian` VALUES ('20', '17', 'S18'); INSERT INTO `wuxianjilian` VALUES ('21', '20', 'T20');
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。
希望本文所述對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
- php+mysql實(shí)現(xiàn)無(wú)限級(jí)分類 | 樹(shù)型顯示分類關(guān)系
- php+mysql不用遞歸實(shí)現(xiàn)的無(wú)限級(jí)分類實(shí)例(非遞歸)
- php+mysql實(shí)現(xiàn)無(wú)限級(jí)分類
- 使用函數(shù)遞歸實(shí)現(xiàn)基于php和MySQL的動(dòng)態(tài)樹(shù)型菜單
- Php連接及讀取和寫(xiě)入mysql數(shù)據(jù)庫(kù)的常用代碼
- PHP讀取MySQL數(shù)據(jù)代碼
- php+mysql查詢實(shí)現(xiàn)無(wú)限下級(jí)分類樹(shù)輸出示例
- PHP+MySQL實(shí)現(xiàn)無(wú)極限分類欄目的方法
- php+mysql實(shí)現(xiàn)無(wú)限分類實(shí)例詳解
- php+mysql數(shù)據(jù)庫(kù)實(shí)現(xiàn)無(wú)限分類的方法
- PHP遞歸寫(xiě)入MySQL實(shí)現(xiàn)無(wú)限級(jí)分類數(shù)據(jù)操作示例
相關(guān)文章
jQuery實(shí)現(xiàn)根據(jù)生日計(jì)算年齡 星座 生肖
本篇文章主要是對(duì)利用jQuery實(shí)現(xiàn)根據(jù)生日計(jì)算年齡,星座,生肖的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下2016-11-11jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問(wèn)題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問(wèn)題,通過(guò)第三方的json2.js做到兼容,需要的朋友可以參考下。2016-05-05JQuery實(shí)現(xiàn)Ajax加載圖片的方法
這篇文章主要介紹了JQuery實(shí)現(xiàn)Ajax加載圖片的方法,涉及jQuery基于緩存獲取圖片的技巧,需要的朋友可以參考下2015-12-12jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12使用jquery動(dòng)態(tài)加載javascript以減少服務(wù)器壓力
如果您要?jiǎng)?chuàng)建一個(gè)web2.0的應(yīng)用程序,那么你的網(wǎng)頁(yè)會(huì)包括大量的JavaScript文件,這些可能會(huì)拖慢您的網(wǎng)頁(yè)。因此,動(dòng)態(tài)加載JavaScript代碼到您的網(wǎng)頁(yè)是一個(gè)好主意,即只有當(dāng)實(shí)用他們的時(shí)候加載它們。這種策略可以幫助你減少你的網(wǎng)頁(yè)的加載時(shí)間2012-10-10iframe異步加載實(shí)現(xiàn)點(diǎn)擊左邊菜單加載右邊內(nèi)容實(shí)例講解
iframe異步加載想必很多朋友對(duì)你都不會(huì)陌生,接下來(lái)將實(shí)現(xiàn)這樣一個(gè)功能左邊菜單不能刷新的情況下,異步加載右邊的內(nèi)容頁(yè)面,感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03