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
給需要的人作參考.
| 