jQuery+PHP+MySQL實現(xiàn)無限級聯(lián)下拉框效果
本文簡單實現(xiàn)jQuery無限級聯(lián)效果,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
圖1 僅下拉框
圖2 層級提示+下拉框
圖3 存儲數(shù)據(jù)點擊響應(yīng)
主要包含3個文件:index.html(主頁),wuxianjilian.php(數(shù)據(jù)處理),wuxianjilian.sql(MySQL數(shù)據(jù)文件)
1. index.html
<html> <head> <title>無限級聯(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(); //移除后面所有子級下拉菜單 $(".selection:last").after(data); //添加子級下拉菜單 }else { $("#jilianContainer").append(data); //初始加載情況 } //所有下拉響應(yīng) $(".selection").unbind().change(function(){ getData($(this)); }); }, error:function(msg){ alert('error'); } }); } //Init getData($(this)); }); </script> <!-- 數(shù)據(jù)存儲示例,僅提取數(shù)據(jù),不做操作 --> <div style="height:100px;display:block;"></div> <input type="button" value="存儲數(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ù)庫連接操作 $conn = mysql_connect("localhost","Zjmainstay","") or die("Can not connect to database.Fatal error handle by ". __FILE__); mysql_select_db("test",$conn); //數(shù)據(jù)庫名為 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'].'</option>'; } if(!empty($html)) $html = '<select class="selection"><option value="">請選擇</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í),可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學(xué)習(xí)。
希望本文所述對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。
- php+mysql實現(xiàn)無限級分類 | 樹型顯示分類關(guān)系
- php+mysql不用遞歸實現(xiàn)的無限級分類實例(非遞歸)
- php+mysql實現(xiàn)無限級分類
- 使用函數(shù)遞歸實現(xiàn)基于php和MySQL的動態(tài)樹型菜單
- Php連接及讀取和寫入mysql數(shù)據(jù)庫的常用代碼
- PHP讀取MySQL數(shù)據(jù)代碼
- php+mysql查詢實現(xiàn)無限下級分類樹輸出示例
- PHP+MySQL實現(xiàn)無極限分類欄目的方法
- php+mysql實現(xiàn)無限分類實例詳解
- php+mysql數(shù)據(jù)庫實現(xiàn)無限分類的方法
- PHP遞歸寫入MySQL實現(xiàn)無限級分類數(shù)據(jù)操作示例
相關(guān)文章
jQuery實現(xiàn)根據(jù)生日計算年齡 星座 生肖
本篇文章主要是對利用jQuery實現(xiàn)根據(jù)生日計算年齡,星座,生肖的示例代碼進行了介紹,需要的朋友可以過來參考下2016-11-11jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題,通過第三方的json2.js做到兼容,需要的朋友可以參考下。2016-05-05jquery實現(xiàn)checkbox全選全不選的簡單實例
本篇文章主要是對jquery實現(xiàn)checkbox全選全不選的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12使用jquery動態(tài)加載javascript以減少服務(wù)器壓力
如果您要創(chuàng)建一個web2.0的應(yīng)用程序,那么你的網(wǎng)頁會包括大量的JavaScript文件,這些可能會拖慢您的網(wǎng)頁。因此,動態(tài)加載JavaScript代碼到您的網(wǎng)頁是一個好主意,即只有當(dāng)實用他們的時候加載它們。這種策略可以幫助你減少你的網(wǎng)頁的加載時間2012-10-10iframe異步加載實現(xiàn)點擊左邊菜單加載右邊內(nèi)容實例講解
iframe異步加載想必很多朋友對你都不會陌生,接下來將實現(xiàn)這樣一個功能左邊菜單不能刷新的情況下,異步加載右邊的內(nèi)容頁面,感興趣的你可以參考下本文或許對你有所幫助2013-03-03