[AJAX] jQuery的多重下拉式選單應用：Select box manipulation－danielhuang030 的研究日誌

從本網誌回應數最高的文章得知，大家似乎對多重下拉式選單的功能情有獨鍾啊！Ajax 能夠在不換頁的情況下，達到資料庫連結，是許多人夢寐以求的功能；而 jQuery 易上手與輕鬆操作的特性，讓我們能更簡單的運用 Ajax 達成目的。然而隨著時間的推移，過去介紹的 cascade 已經有很長一段時間沒有更新，而且在使用上其實存在不少綁手綁腳的地方；距離 jQuery 的宗旨「Write Less, Do More」似乎是還差那麼一小段距離...

經由公司的 jQuery 教育訓練，Jace 介紹了一個超讚的 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 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作，真的要感謝廣大網路上樂於分享的前輩們的努力，有需要的人可以試試看這個更簡單的方法唷！

線上程式預覽
 範例程式下載（範例程式內附 selectboxes.sql 即為測試用的資料庫 sql 檔）