台灣最大防水抓漏接案平台 輕鬆接案網 | 24H全省服務.合約保障 提供您平價又專業的搬家服務 |
[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」似乎是還差那麼一小段距離...
有需要填入預設值的時候,至要在隱藏欄位 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 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作,真的要感謝廣大網路上樂於分享的前輩們的努力,有需要的人可以試試看這個更簡單的方法唷! |
廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲 完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心! 廣利不動產-新板特區指名度最高、值得您信賴的好房仲 您的托付,廣利用心為您服務 |