TShopping
標題:
jQuery的多重下拉式選單應用:Select box manipulation
[打印本頁]
作者:
woff
時間:
2012-7-27 16:53
標題:
jQuery的多重下拉式選單應用:Select box manipulation
jQuery Plugin:
Select box manipulation
。透過這個外掛的幫助,可以更輕鬆的實現多重下拉式選單的功能唷,甚至連 cascade 不容易做到的「預設值」也完全沒問題,所需要撰寫的程式碼也少於 cascade,整個就是夢幻的 Plugin!這麼神奇的外掛要怎麼用呢?以下簡單的範例,給有需要的人參考吧:範例是三階層的關聯式多重下拉式選單,分為index.php(呈現頁)、action.php(Ajax 後端資料處理頁)、index.js(JavaScript 處理)、以及 selectboxes
首先我們載入 jQuery 以及 selectboxes,同時頁面所需使用的 JavaScript 也利用外部的方式載入:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="selectboxes.js"></script>
<script type="text/javascript" src="index.js"></script>
複製代碼
index.php(節錄):
<h3>主機 - 類型 - 遊戲(預設值:XBOX360/FPS/刺客聯盟)</h3>
<p>
<select id="select1">
<option value="">請選擇</option>
<?php
// 資料庫設定
$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');
// 動態取得第一階層下拉式選單
$query = 'SELECT id, name FROM games WHERE levelNum = 1';
$result = mysql_query($query, $link);
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="' . $row['id'] . '">' . $row['name'] . '</option>' . "\n";
}
?>
</select>
<select id="select2">
<option value="">請選擇</option>
</select>
<select id="select3">
<option value="">請選擇</option>
</select>
<!-- 利用隱藏欄位指定預設的選項 -->
<input id="fullIdPath" type="hidden" value="3,8,24" />
</p>
複製代碼
有需要填入預設值的時候,至要在隱藏欄位 fullIdPath 中給定 id 的序列值,就可以輕鬆達到設定預設值的效果。
action.php:
<?php
// 資料庫設定
$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);
複製代碼
將取得的資料放入陣列,在經由 json_encode() 轉換為 json 格式;selectboxes 就可以將其轉化為選項
index.js:
$(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());
});
});
複製代碼
是不是非常簡單呢!多樣化的 jQuery Plugin 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作,真的要感謝廣大網路上樂於分享的前輩們的努力,有需要的人可以試試看這個更簡單的方法唷!
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2