已往在做Select多重關聯選單，大半是透過儲存於 Javascript 的陣列，來達到
我們所想要的關聯選單效果，但那限制於我們事先輸入關聯選單裡面的值，當
選單裡的值是需要每次去判斷讀取資料庫，來達成關聯選單效果，這情況就變
的很麻煩，在此就必需依靠 jQuery.cascade ，達成此效果。
【jQuery cascade】官網 ： 範例
官網的範例有詳細的執行效果，但範例並非是示範讀取資料庫，僅是讀
取某資料檔的陣列，所以我們需將改為讀取資料庫的資料。
我是參考台扣啵的文章再去做修改：[Ajax]jQuery的多重下拉選單應用
jQuery.cascade的路徑：
﹂ _WWW_
﹂ include
﹂ javascript
﹂ jQuery
﹂ jquery-1.2.6.min.js
﹂ jquery.cascade.ext.js
﹂ jquery.cascade.js
﹂ jquery.templating.js
1•下載 jQuery.cascade後，將我們所需檔案放置資料夾，為上面路徑
所包含的四個檔。
2•需兩個網頁檔案為：test.php(主要呈現頁面) 及 action.php(讀取資
料庫處理頁面)。
〔test.php〕
1•將所需jQuery程式包含進來，至於<head></head>裡。
<script type="text/javascript"
src="include/javascript/jQuery/jquery-1.2.6.min.js"></script>
<script type="text/javascript"
src="include/javascript/jQuery/jquery.cascade.js"></script>
<script type="text/javascript"
src="include/javascript/jQuery/jquery.cascade.ext.js"></script>
<script type="text/javascript"
src="include/javascript/jQuery/jquery.templating.js"></script>
2•網頁所需欄位，底下僅只二級關聯選單，將底下程式至於<body>
</boby>裡。
第一項<select id="myParentSelect">
<option value="">請選擇</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
第二項<select id="myFirstChildSelect">
<option value="">請選擇</option>
</select>
<script type="text/javascript">
$(function () {
// 第一階層對應第二階層
$('#myFirstChildSelect').cascade('#myParentSelect', {
ajax: {
//所需的後端處理頁面
url:'action.php',
//傳值至後端頁面
data:{ val: $('#myParentSelect').val() }
},
template: function(item) { return "<option value='" +
item.Value + "'>" + item.Text + "</option>"; },
match: function(selectedValue) { return this.When
== selectedValue; }
});
});
</script>
〔action.php〕
1•SQL部份我是使用 MDB2 連線，前端所傳遞過來的值需已GET取的
，需特別注意$list部份大小寫及 ' 符號，容易出問題。
<?php
require_once('include/SQLstore.php');
if (isset($_GET['val'])) {
$parentId = $_GET['val'];
}
$sql = "SELECT id, name FROM table
WHERE value='$parentId'";
$result =& $mdb2 -> query($sql);
if (PEAR::isError($result))
die('查詢發生錯誤：'.$result -> getMessage());
$predata = $result -> fetchAll();
if (PEAR::isError($predata))
die('存取資料失敗：'.$predata -> getMessage());
$list = '[';
foreach ( $predata as $row_predata ) {
//原始碼 {'When':'A','Value':'A2','Text':'A2'},
$list .= '{\'When\':\''.$parentId.'\',\'Value\':\'
'.$row_predata[0].' \',\'Text\':\' '.$row_predata[1].' \'},';
}
$list .= ']';
echo $list;
?>
|
