茫茫網海中的冷日 - 對這文章發表回應
茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1498570 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_1541.JPG

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

對這文章發表回應

發表限制: 非會員 可以發表

發表者: 冷日 發表時間: 2012/11/12 16:08:21

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

介紹一個超讚的 jQuery Plugin: Select box manipulation。透過這個外掛的幫助,可以更輕鬆的實現多重下拉式選單的功能唷,甚至連 cascade 不容易做到的「預設值」也完全沒問題,所需要撰寫的程式碼也少於 cascade,整個就是夢幻的 Plugin!這麼神奇的外掛要怎麼用呢?以下簡單的範例,給有需要的人參考吧:範例是三階層的關聯式多重下拉式選單,分為index.php(呈現頁)、action.php(Ajax 後端資料處理頁)、index.js(JavaScript 處理)、以及 selectboxes

首先我們載入 jQuery 以及 selectboxes,同時頁面所需使用的 JavaScript 也利用外部的方式載入:


  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  2. <script type="text/javascript" src="selectboxes.js"></script>
  3. <script type="text/javascript" src="index.js"></script>


index.php(節錄):



  1. <p>
  2. <select id="select1">
  3. <option value="">請選擇</option>
  4. <?php
  5.     // 資料庫設定
  6.     $host_sql = 'localhost';
  7.     $username_sql = 'username';
  8.     $password_sql = 'password';
  9.   
  10.     // 聯結資料庫
  11.     $link = mysql_connect($host_sql, $username_sql, $password_sql) or die('無法連結資料庫');
  12.     mysql_select_db('selectboxes', $link);

  13.     mysql_query('SET NAMES UTF8');

  14.     // 動態取得第一階層下拉式選單
  15.     $query = 'SELECT id, name FROM games WHERE levelNum = 1';
  16.     $result = mysql_query($query, $link);
  17.     while ($row = mysql_fetch_assoc($result)) {
  18.         echo '<option value="' . $row['id'] . '">' . $row['name'] . '</option>' . "\n";
  19.     }
  20. ?>
  21. </select>
  22. <select id="select2">
  23. <option value="">請選擇</option>
  24. </select>
  25. <select id="select3">
  26. <option value="">請選擇</option>
  27. </select>
  28. <!-- 利用隱藏欄位指定預設的選項 -->
  29. <input id="fullIdPath" type="hidden" value="3,8,24" />
  30. </p>



有需要填入預設值的時候,至要在隱藏欄位 fullIdPath 中給定 id 的序列值,就可以輕鬆達到設定預設值的效果。

action.php:
  1. <?php

  2.     // 資料庫設定
  3.     $host_sql = 'localhost';
  4.     $username_sql = 'username';
  5.     $password_sql = 'password';

  6.     // 聯結資料庫
  7.     $link = mysql_connect($host_sql, $username_sql, $password_sql) or die('無法連結資料庫');
  8.     mysql_select_db('selectboxes', $link);
  9.     mysql_query('SET NAMES UTF8');

  10.     // 預設選項
  11.     $data['0'] = '請選擇';

  12.     // 只有在 parentId 與 levelNum 都存在的情況下,才進行資料庫的搜尋
  13.     if (0 !== (int) $_GET['id'] && 0 !== (int) $_GET['lv']) {
  14.         $parentId = (int) $_GET['id'];

  15.         $levelNum = (int) $_GET['lv'];
  16.         
  17.         $query = sprintf("SELECT id, name FROM games WHERE parentId = %d AND levelNum = %d", $parentId, $levelNum);
  18.         $result = mysql_query($query, $link);
  19.         while ($row = mysql_fetch_assoc($result)) {
  20.         
  21.             // 將取得的資料放入陣列中
  22.             $data[$row['id']] = $row['name'];
  23.         }
  24.     }
  25.    
  26.     // 將陣列轉換為 json 格式輸入
  27.     echo json_encode($data);

將取得的資料放入陣列,在經由 json_encode() 轉換為 json 格式;selectboxes 就可以將其轉化為選項

index.js:

  1. $(function () {

  2. // 判斷是否有預設值
  3. var defaultValue = false;
  4. if (0 < $.trim($('#fullIdPath').val()).length) {
  5. $fullIdPath = $('#fullIdPath').val().split(',');
  6. defaultValue = true;
  7. }

  8. // 設定預設選項
  9. if (defaultValue) {
  10. $('#select1').selectOptions($fullIdPath[0]);
  11. }

  12. // 開始產生關聯下拉式選單
  13. $('#select1').change(function () {
  14. // 觸發第二階下拉式選單
  15. $('#select2').removeOption(/.?/).ajaxAddOption(
  16. 'action.php',
  17. { 'id': $(this).val(), 'lv': 2 },
  18. false,
  19. function () {

  20. // 設定預設選項
  21. if (defaultValue) {
  22. $(this).selectOptions($fullIdPath[1]).trigger('change');
  23. } else {
  24. $(this).selectOptions().trigger('change');
  25. }
  26. }
  27. ).change(function () {
  28. // 觸發第三階下拉式選單
  29. $('#select3').removeOption(/.?/).ajaxAddOption(

  30. 'action.php',
  31. { 'id': $(this).val(), 'lv': 3 },
  32. false,
  33. function () {

  34. // 設定預設選項
  35. if (defaultValue) {
  36. $(this).selectOptions($fullIdPath[2]);
  37. }
  38. }
  39. );
  40. });


  41. }).trigger('change');

  42. // 全部選擇完畢後,顯示所選擇的選項
  43. $('#select3').change(function () {
  44. alert('主機:' + $('#select1 option:selected').text() +
  45. '/類型:' + $('#select2 option:selected').text() +
  46. '/遊戲:' + $('#select3 option:selected').text());
  47. });
  48. });


是不是非常簡單呢!多樣化的 jQuery Plugin 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作,真的要感謝廣大網路上樂於分享的前輩們的努力,有需要的人可以試試看這個更簡單的方法唷!


原文出處:[AJAX]的多重下拉式選單應用:Select box manipulation - PHP - TShopping 綜合論壇
內容圖示
url email imgsrc image code quote
樣本
bold italic underline linethrough   












 [詳情...]
validation picture

注意事項:
預覽不需輸入認證碼,僅真正發送文章時才會檢查驗證碼。
認證碼有效期10分鐘,若輸入資料超過10分鐘,請您備份內容後,重新整理本頁並貼回您的內容,再輸入驗證碼送出。

選項

Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|