打造高品質環境,創造潔淨生活
專業承包裝潢清潔、石材保養、拋光磚
防水抓漏外包網專業維修各大品牌冷氣,多家大廠指定合作,各式問題排除
完修有保固,證照技師團隊,高效率服務

首頁  •  j2h 論壇 • 程式設計討論     • 

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

房東:多拉B夢
發表時間:2011-03-23
[檢舉]


大家似乎對多重下拉式選單的功\能情有獨鍾啊!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 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作,真的要感謝廣大網路上樂於分享的前輩們的努力,有需要的人可以試試看這個更簡單的方法唷!





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 380 人回應  選擇頁數 【第1 頁】 【第2 頁】 【第3 頁】 【第4 頁】 【第5 頁】 【第6 頁】 【第7 頁】 【第8 頁】 【第9 頁】 【第10 頁】 【第11 頁】 【第12 頁】 【第13 頁】 

    姓名:
    佈告內容: