專業丈量施工設計窗簾窗飾,包含各種窗簾布
捲簾等,高質感窗簾,樣式齊
辦公室清潔優質油漆工程,各式油漆粉刷專業負責價格合理
免費估價,公道滿意

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] cascade + 多重關聯式選單

房東:阿寶
發表時間:2011-03-23
[檢舉]


已往在做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;

                 ?>





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: