創意設計,讓居家空間再加分
提供各式精緻窗簾,專業窗藝設計師為您服務!
門窗工程室內裝潢油漆師傅領導,專精各種油漆工程
施工期間油漆工程價目表也絕不亂加價

首頁  •  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 頁】 

    姓名:
    佈告內容:
    其他選項: