::jQuery::中文官網

    jQuery 基本安裝請參考此篇【jQuery + jQuery Cycle Plugin 設定

已往在做Select多重關聯選單,大半是透過儲存於 Javascript 的陣列,來達到
我們所想要的關聯選單效果,但那限制於我們事先輸入關聯選單裡面的值,當
選單裡的值是需要每次去判斷讀取資料庫,來達成關聯選單效果,這情況就變
的很麻煩,在此就必需依靠 jQuery.cascade ,達成此效果。

    【jQuery cascade】官網  : 範例
            官網的範例有詳細的執行效果,但範例並非是示範讀取資料庫,僅是讀
            取某資料檔的陣列,所以我們需將改為讀取資料庫的資料。
            我是參考台扣啵的文章再去做修改:[Ajax]jQuery的多重下拉選單應用

             jQuery.cascade的路徑:
               ﹂  _WWW_
                     ﹂  include
                           ﹂  javascript
                                 ﹂  jQuery
                                       ﹂  jquery-1.2.6.min.js
                                       ﹂  jquery.cascade.ext.js
                                       ﹂  jquery.cascade.js
                                       ﹂  jquery.templating.js

            1‧下載 jQuery.cascade後,將我們所需檔案放置資料夾,為上面路徑
                 所包含的四個檔。
            2‧需兩個網頁檔案為:test.php(主要呈現頁面) 及 action.php(讀取資
                 料庫處理頁面)。

    〔test.php〕
            1‧將所需jQuery程式包含進來,至於<head></head>裡。
                  <script type="text/javascript" 
                  src="include/javascript/jQuery/jquery-1.2.6.min.js"></script>
                  <script type="text/javascript" 
                  src="include/javascript/jQuery/jquery.cascade.js"></script>
                  <script type="text/javascript" 
                  src="include/javascript/jQuery/jquery.cascade.ext.js"></script>
                  <script type="text/javascript" 
                  src="include/javascript/jQuery/jquery.templating.js"></script>
            2‧網頁所需欄位,底下僅只二級關聯選單,將底下程式至於<body>
                 </boby>裡。
                  第一項<select id="myParentSelect">
                                   <option value="">請選擇</option>
                                   <option value="A">A</option>
                                   <option value="B">B</option>
                                   <option value="C">C</option>
                                   <option value="D">D</option>
                                   <option value="E">E</option>   
                              </select>
                  第二項<select id="myFirstChildSelect">
                                   <option value="">請選擇</option>
                              </select>
                 
                  <script type="text/javascript">
                          $(function () {   
                                 // 第一階層對應第二階層
                                 $('#myFirstChildSelect').cascade('#myParentSelect', {
                                        ajax: {
                                               //所需的後端處理頁面
                                               url:'action.php',
                                               //傳值至後端頁面
                                               data:{ val: $('#myParentSelect').val() }
                                        },
                                        template: function(item) { return "<option value='" +
                                            item.Value + "'>" + item.Text + "</option>"; },
                                        match: function(selectedValue) { return this.When 
                                            == selectedValue; }
                                 });
                          });
                  </script>

    〔action.php〕
            1‧SQL部份我是使用 MDB2 連線,前端所傳遞過來的值需已GET取的
                 ,需特別注意$list部份大小寫及 ' 符號,容易出問題。
                 <?php
                      require_once('include/SQLstore.php'); 
 
                      if (isset($_GET['val'])) {
                           $parentId = $_GET['val'];
                      }
                      
                      $sql = "SELECT id, name FROM table 
                                    WHERE value='$parentId'";
                      
                      $result =& $mdb2 -> query($sql);
                      if (PEAR::isError($result))
                          die('查詢發生錯誤:'.$result -> getMessage());
                                 
                      $predata = $result -> fetchAll();
                      if (PEAR::isError($predata))
                          die('存取資料失敗:'.$predata -> getMessage());
 
                      $list = '[';
                       
                      foreach ( $predata as $row_predata ) {
                           //原始碼 {'When':'A','Value':'A2','Text':'A2'},
                           $list .= '{\'When\':\''.$parentId.'\',\'Value\':\'
                                  '.$row_predata[0].' \',\'Text\':\' '.$row_predata[1].' \'},';
                      }
                         
                      $list .= ']';
                      
                      echo $list;
                 ?>

創作者介紹

我想 - 我是屬於海洋

kyosukehot 發表在 痞客邦 PIXNET 留言(0) 人氣()