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

多年裝潢經驗，專針對住家裝潢、住家規劃裝潢
專業諮詢為您打造完美居住空間！

專業施工、完善保固、為您解決居家/辦公大樓漏水
壁癌、外牆防水隔熱問題

首頁 ‧ j2h 論壇 ‧ 程式設計討論 ‧

[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嚙瘦

// 嚙踝蕭⑷w嚙稽嚙緩
$host_sql = "localhost";
$username_sql = "username";
$password_sql = "password";

$link = mysql_connect($host_sql, $username_sql, $password_sql) or die("嚙盤嚙糊嚙編嚙踝蕭嚙踝蕭⑷w");
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;

嚙踝蕭@嚙踝蕭嚙踝蕭嚙瘢嚙瞌嚙箭嚙踝蕭⑩嚙踝蕭璁∴蕭G

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

嚙賭中When嚙瞇嚙踝蕭嚙磕嚙瑾嚙踝蕭嚙篁嚙踝蕭嚙褓，Value嚙瞌嚙踝蕭嚙瑾嚙踝蕭嚙篁嚙踝蕭嚙褓，Test嚙篁嚙瞌嚙磊嚙諂佗蕭嚙踝蕭嚙踝蕭嚙豌迎蕭嚙踝蕭r嚙瘤嚙緯嚙磅嚙瞌嚙窯嚙瞇JavaScript嚙瞌嚙篌嚙緘嚙篇嚙諉感嚙踝蕭嚙瘢嚙踝蕭@嚙緻嚙諉範嚙課途嚙踝蕭嚙璀嚙踝蕭嚙篇嚙瞋嚙篌嚙緘嚙篇嚙踝蕭F嚙瑾嚙緬嚙褕塚蕭...嚙踝蕭茪~嚙緻嚙緹嚙踝蕭狴H嚙緻嚙窮嚙踝蕭n嚙磅嚙瞌嚙窯嚙瞇嚙瘢嚙複梧蕭j嚙窮嚙踝蕭嚙賞輕嚙瞑嚙篇嚙碼嚙踝蕭嚙緘嚙踝蕭⑷w嚙踝蕭嚙篁嚙踝蕭嚙磊嚙諂佗蕭嚙踝蕭嚙踝蕭o^^http://blog.roodo.com/taikobo0/archives/6166625.html

嚙瑾嚙瑾 1 嚙瘡嚙稷嚙踝蕭嚙瑾嚙瑾嚙踝蕭颩嚙踝蕭嚙� 嚙箠嚙踝蕭1 嚙踝蕭嚙篌

嚙練嚙磕嚙瘦
嚙瘦嚙箠嚙踝蕭嚙箴嚙瘦