台灣最大程式設計社群網站
線上人數
745
 
會員總數:245216
討論主題:189089
歡迎您免費加入會員
討論區列表 >> 專欄文章 >> PHP+MYSQL動態選單應用(by using Jquery)
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
PHP+MYSQL動態選單應用(by using Jquery)
價值 : 0 QP  點閱數:1612 回應數:0

樓主

中仔
門外漢
0 14
350 17
發送站內信

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');//引入資料庫連結檔 ?>
<?php
header('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

給需要的人作參考.
本篇文章發表於2008-10-01 22:53
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
目前尚無任何回覆
   

回覆
如要回應,請先登入.