[AJAX] 多重下拉式選單應用：Select box manipulat

大家似乎對多重下拉式選單的功能情有獨鍾啊！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]

請選擇






    // 資料庫設定



    $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 '' . $row['name'] . '' . "\n";



    }







?>











請選擇











請選擇