大家似乎對多重下拉式選單的功\能情有獨鍾啊！Ajax 能夠在不換頁的情況下，達到資料庫連結，是許\多人夢寐以求的功\能；而 jQuery 易上手與輕鬆操作的特性，讓我們能更簡單的運用 Ajax 達成目的。然而隨著時間的推移，過去介紹的 [url=http://plugins.jquery.com/project/cascade][color=#333333]cascade[/color][/url] 已經有很長一段時間沒有更新，而且在使用上其實存在不少綁手綁腳的地方；距離 jQuery 的宗旨「Write Less, Do More」似乎是還差那麼一小段距離...
介紹一個超讚的 jQuery Plugin：[url=http://www.texotela.co.uk/code/jquery/select/][color=#333333]Select box manipulation[/color][/url]。透過這個外掛的幫助，可以更輕鬆的實現多重下拉式選單的功\能唷，甚至連 cascade 不容易做到的「預設值」也完全沒問題，所需要撰寫的程式碼也少於 cascade，整個就是夢幻的 Plugin！這麼神奇的外掛要怎麼用呢？以下簡單的範例，給有需要的人參考吧：範例是三階層的關聯式多重下拉式選單，分為index.php（呈現頁）、action.php（Ajax 後端資料處理頁）、index.js（JavaScript 處理）、以及 selectboxes
首先我們載入 jQuery 以及 selectboxes，同時頁面所需使用的 JavaScript 也利用外部的方式載入：
[color=#0057a6][code]
[/code][/color]
index.php（節錄）：
[color=#0057a6][code]
[/code][/color]
有需要填入預設值的時候，至要在隱藏欄位 fullIdPath 中給定 id 的序列值，就可以輕鬆達到設定預設值的效果。
action.php：
[code]
// 資料庫設定
$host_sql = \'localhost\';
$username_sql = \'username\';
$password_sql = \'password\';
// 聯結資料庫
$link = mysql_connect($host_sql, $username_sql, $password_sql) or die(\'無法連結資料庫\');
mysql_select_db(\'selectboxes\', $link);
mysql_query(\'SET NAMES UTF8\');
// 預設選項
$data[\'0\'] = \'請選擇\';
// 只有在 parentId 與 levelNum 都存在的情況下，才進行資料庫的搜尋
if (0 !== (int) $_GET[\'id\'] && 0 !== (int) $_GET[\'lv\']) {
$parentId = (int) $_GET[\'id\'];
$levelNum = (int) $_GET[\'lv\'];
$query = sprintf(\"SELECT id, name FROM games WHERE parentId = %d AND levelNum = %d\", $parentId, $levelNum);
$result = mysql_query($query, $link);
while ($row = mysql_fetch_assoc($result)) {
// 將取得的資料放入陣列中
$data[$row[\'id\']] = $row[\'name\'];
}
}
// 將陣列轉換為 json 格式輸入
echo json_encode($data);[/code]
將取得的資料放入陣列，在經由 json_encode() 轉換為 json 格式；selectboxes 就可以將其轉化為選項
index.js：
[code]$(function () {
// 判斷是否有預設值
var defaultValue = false;
if (0 < $.trim($(\'#fullIdPath\').val()).length) {
$fullIdPath = $(\'#fullIdPath\').val().split(\',\');
defaultValue = true;
}
// 設定預設選項
if (defaultValue) {
$(\'#select1\').selectOptions($fullIdPath[0]);
}
// 開始產生關聯下拉式選單
$(\'#select1\').change(function () {
// 觸發第二階下拉式選單
$(\'#select2\').removeOption(/.?/).ajaxAddOption(
\'action.php\',
{ \'id\': $(this).val(), \'lv\': 2 },
false,
function () {
// 設定預設選項
if (defaultValue) {
$(this).selectOptions($fullIdPath[1]).trigger(\'change\');
} else {
$(this).selectOptions().trigger(\'change\');
}
}
).change(function () {
// 觸發第三階下拉式選單
$(\'#select3\').removeOption(/.?/).ajaxAddOption(
\'action.php\',
{ \'id\': $(this).val(), \'lv\': 3 },
false,
function () {
// 設定預設選項
if (defaultValue) {
$(this).selectOptions($fullIdPath[2]);
}
}
);
});
}).trigger(\'change\');
// 全部選擇完畢後，顯示所選擇的選項
$(\'#select3\').change(function () {
alert(\'主機：\' + $(\'#select1 option:selected\').text() +
\'／類型：\' + $(\'#select2 option:selected\').text() +
\'／遊戲：\' + $(\'#select3 option:selected\').text());
});
});
[/code]
是不是非常簡單呢！多樣化的 jQuery Plugin 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作，真的要感謝廣大網路上樂於分享的前輩們的努力，有需要的人可以試試看這個更簡單的方法唷！
|
