jQuery.cascade + 多重關聯式選單 @ 我想 - 我是屬於海洋

：：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;
                 ?>