TShopping

 找回密碼
 註冊
搜索
查看: 3646|回復: 1

[教學] jQuery的多重下拉式選單應用:Select box manipulation

[複製鏈接]
發表於 2012-7-27 16:53:50 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
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. <h3>主機 - 類型 - 遊戲(預設值:XBOX360/FPS/刺客聯盟)</h3>

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

  15.     // 動態取得第一階層下拉式選單
  16.     $query = 'SELECT id, name FROM games WHERE levelNum = 1';
  17.     $result = mysql_query($query, $link);
  18.     while ($row = mysql_fetch_assoc($result)) {
  19.         echo '<option value="' . $row['id'] . '">' . $row['name'] . '</option>' . "\n";
  20.     }

  21. ?>
  22. </select>
  23. <select id="select2">
  24. <option value="">請選擇</option>
  25. </select>
  26. <select id="select3">
  27. <option value="">請選擇</option>
  28. </select>
  29. <!-- 利用隱藏欄位指定預設的選項 -->
  30. <input id="fullIdPath" type="hidden" value="3,8,24" />
  31. </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 可以幫助我們更輕鬆的完成過去繁複的程式撰寫工作,真的要感謝廣大網路上樂於分享的前輩們的努力,有需要的人可以試試看這個更簡單的方法唷!


 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-7 02:20 , Processed in 0.052912 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表