[JQuery] cascade PHP+MYSQL動態選單應用

房東：小妹
發表時間：2011-03-23

1.請先下載jquery檔案

http://140.124.90.41/up/a/jquery.rar

2.解壓放置網站跟目錄資料夾下

PHP+MYSQL動態選單應用（by using Jquery）

一.需求頁面：test.php and action.php，test.php是下拉選單部份而action.php是jquery在後台處理下拉選單的頁面

二.test.php

首些請於</head>標籤前include以下程式碼,js我是放在跟目錄的jquery下

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript" src="jquery/jquery.cascade.js"></script>

<script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script>

<script type="text/javascript" src="jquery/jquery.templating.js"></script>

頁面中的下拉選單有二-->class1選單顯示廠商類別名稱而c_name選單是依據class1的值顯示該類別下的所有廠商名稱

原始碼解釋過程如下：

第一層class1選單程式碼

複製程式

<select name="class1[]" id="class1"> 

<option value="">Channel Type</option> 

<?php// 資料庫設定開始mysql_select_db($database_mio, $mio); 

$query = sprintf("SELECT DISTINCT class1 FROM company");//這地方請下sql語法撈出第一層選單資料 

$result = mysql_query($query, $mio);//資料庫設定結束 

 

//撈出資料庫廠商類別的值 

while ($row = mysql_fetch_assoc($result)) {    echo '<option value="' . $row["class1"] . '">' . $row["class1"] . '</option>' . "\n";    }?></select>

第二層c_name選單程式碼

這部份只是純粹做下拉選單即可,他的值會利用jquery回傳產生

複製程式

<select name="c_name[]" id="c_name"><option value="">Store Name</option></select>

緊跟在第二層選單後插入jquery語法並送出至action.php作處理

複製程式

<script> 

jQuery(document).ready(function(){ $('#c_name').cascade('#class1', { 

//前面的c_name表示第二層選單的id,後面的class1表示第一層選單的id   

ajax: {      type: "GET",      url:  'action.php',//傳送至action.php     

              data: { act: 'first', val: $('#class1').val() }//傳送變數act與val給action.php作判斷與處理  },   

              template: function(item) { return "<option value='" + item.Value + "'>" +  item.Text + "</option>"; },   

              match: function(selectedValue) { return this.When == selectedValue; }  });});</script>

三.action.php程式碼解說

複製程式

<?php require_once('Connections/mio.php');//引入資料庫連結檔 ?> 

<?phpheader('Content-Type:text/html;charset=BIG5');  

// 資料庫設定mysql_select_db($database_mio, $mio);if (!empty($_GET['act']))  

{ $action = $_GET['act'];}if (!empty($_GET['val'])) 

   {    $parentId = $_GET['val'];}$list = '[';switch ($action) { 

//如果act＝first情況,就將廠商類別為$parentId的廠商撈出來,而這個值就是test.php的第一層下拉選單的值,然後組成jquery的json資料格式然後回傳//   

        case 'first':   $query = sprintf("SELECT C_name FROM company WHERE class1= '$parentId' ORDER BY C_name ASC");   $result = mysql_query($query, $mio);  

        while ($row = mysql_fetch_assoc($result)) {   $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["C_name"] . '\',\'Text\':\'' . $row["C_name"] . '\'},'; 

    }    

    break;    

    }$list .= ']'; 

echo $list;?>

以上就是簡單的二層動態選單應用

若是要使用三層的話,也是同樣的作法在新增一個欄位作jquery

給需要的人作參考.

贊助網站

廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
完整房訊，房屋、店面熱門精選物件，廣利不動產優質仲介，房屋租賃、買賣資訊透明，交易真安心！
廣利不動產-新板特區指名度最高、值得您信賴的好房仲
您的托付,廣利用心為您服務

1 樓住戶：jack
發表時間：2011-03-23

關於Ajax，我想最棒的地方就是可以於背景呼叫資料庫傳值吧～多重下拉式選單就是一項非常棒的Ajax應用；前幾天Jace丟過來一個國外的網址：jQuery.cascade : Cascading values from forms，這篇文章主要是在說明jQuery的cascade，而它就是用來實現多重下拉式選單的功能。

花了一點時間實作了一下，發現非常簡單就能實現！以前我也作過類似的功能，可是花了我非常多的時間...jQuery把它包裝起來，讓一切變的簡單多了；以下是簡單的範例，給有需要的人參考吧：範例是三階層的關聯式多重下拉式選單，分為index.php（呈現頁）、action.php（Ajax後端資料處理頁）、以及jQuery的cascade

index.php：

第一項　
第二項
第三項

action.php：

// 資料庫設定
$host_sql = "localhost";
$username_sql = "username";
$password_sql = "password";

$link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");
mysql_select_db('target', $link);
mysql_query("SET NAMES UTF8");

if (!empty($_GET['act'])) {
$action = $_GET['act'];
}

if (!empty($_GET['val'])) {
$parentId = $_GET['val'];
}

$list = '[';

switch ($action) {
case 'first':
$query = "SELECT id, name FROM table where lv = 2 AND parentid= $parentId";
$result = mysql_query($query, $link);
while ($row = mysql_fetch_assoc($result)) {
$list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["id"] . '\',\'Text\':\'' . $row["name"] . '\'},';
}
break;
case 'second':
default :
$query = "SELECT id, name FROM table where lv = 3 AND parentid = $parentId";
$result = mysql_query($query, $link);
while ($row = mysql_fetch_assoc($result)) {
$list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["id"] . '\',\'Text\':\'' . $row["name"] . '\'},';
}
break;
}

$list .= ']';
echo $list;

實作的重點是在資料的格式：

list = [{'When':'A1','Value':'W','Text':'SubchildA1a'},
{'When':'A1','Value':'X','Text':'SubchildA1b'},
];

其中When代表上一階層的值，Value是此一階層的值，Test則是下拉式選單顯示的文字；要特別注意JavaScript是大小寫敏感的！實作這個範例途中，曾經被大小寫拖了一段時間...後來才發現～所以這地方要特別注意！希望大家都能輕鬆寫出關聯資料庫的多重下拉式選單囉^^http://blog.roodo.com/taikobo0/archives/6166625.html

　共 1 人回應　　選擇頁數【第1 頁】

姓名：

佈告內容：

其他選項: