首頁 > 開發者 > MySQL

jQuery+PHP+MySQL實現無限級聯下拉框效果_jquery

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 本文簡單實現jQuery無限級聯效果，分享給大家供大家參考，具體內容如下
 效果圖：

　圖1 僅下拉框

　 圖2 層級提示+下拉框

圖3 儲存資料點擊響應

主要包含3個檔案：index.html（首頁），wuxianjilian.php（資料處理），wuxianjilian.sql（MySQL資料檔案）
1. index.html

<html><head> <title>無限級聯</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);     //初始載入情況    }    //所有下拉響應    $(".selection").unbind().change(function(){     getData($(this));    });   },   error:function(msg){    alert('error');   }  }); }  //Init getData($(this)); });</script><!-- 資料存放區樣本，僅提取資料，不做操作 --><div style="height:100px;display:block;"></div><input type="button" value="儲存資料" 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");  //資料庫連接操作 $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'].'</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 TransferSource Server   : localhostSource Server Version : 50516Source Host   : localhost:3306Source Database  : testTarget Server Type : MYSQLTarget Server Version : 50516File Encoding   : 65001Date: 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');

如果大家還想深入學習，可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。

希望本文所述對大家學習jquery程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More