合法優良搬家公司
價格透明,合約保障真安心
信義拆除專業居家清潔
免費到府估價,清潔養護馬上搞定

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

[JQuery] cascade PHP+MYSQL動態選單應用

房東:小妹
發表時間:2011-03-23


1.請先下載jquery檔案

http://140.124.90.41/up/a/jquery.rar



2.解壓放置網站跟目錄資料夾下



PHP+MYSQL動態選單應用(by using Jquery)







一.需求頁面:test.php and action.php,test.php是下拉選單部份而action.php是jquery在後台處理下拉選單的頁面





二.test.php



首些請於</head>標籤前include以下程式碼,js我是放在跟目錄的jquery下

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript" src="jquery/jquery.cascade.js"></script>

<script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script>

<script type="text/javascript" src="jquery/jquery.templating.js"></script>



頁面中的下拉選單有二-->class1選單顯示廠商類別名稱而c_name選單是依據class1的值顯示該類別下的所有廠商名稱



原始碼解釋過程如下:



第一層class1選單程式碼





複製程式



<select name="class1[]" id="class1"> 
<option value="">Channel Type</option> 
<?php// 資料庫設定開始mysql_select_db($database_mio, $mio); 
$query
= sprintf("SELECT DISTINCT class1 FROM company");//這地方請下sql語法撈出第一層選單資料 
$result
= mysql_query($query, $mio);//資料庫設定結束 
 
//撈出資料庫廠商類別的值 
while ($row = mysql_fetch_assoc($result)) {    echo '<option value="' . $row["class1"] . '">' . $row["class1"] . '</option>' . "\n";    }?></select>






第二層c_name選單程式碼

這部份只是純粹做下拉選單即可,他的值會利用jquery回傳產生



複製程式



<select name="c_name[]" id="c_name"><option value="">Store Name</option></select>






緊跟在第二層選單後插入jquery語法並送出至action.php作處理





複製程式



<script> 
jQuery
(document).ready(function(){ $('#c_name').cascade('#class1', { 
//前面的c_name表示第二層選單的id,後面的class1表示第一層選單的id   
ajax
: {      type: "GET",      url:  'action.php',//傳送至action.php     
              data
: { act: 'first', val: $('#class1').val() }//傳送變數act與val給action.php作判斷與處理  },   
              template
: function(item) { return "<option value='" + item.Value + "'>" +  item.Text + "</option>"; },   
              match
: function(selectedValue) { return this.When == selectedValue; }  });});</script>




三.action.php程式碼解說





複製程式



<?php require_once('Connections/mio.php');//引入資料庫連結檔 ?> 
<?phpheader('Content-Type:text/html;charset=BIG5');  
// 資料庫設定mysql_select_db($database_mio, $mio);if (!empty($_GET['act']))  
{ $action = $_GET['act'];}if (!empty($_GET['val'])) 
   
{    $parentId = $_GET['val'];}$list = '[';switch ($action) { 
//如果act=first情況,就將廠商類別為$parentId的廠商撈出來,而這個值就是test.php的第一層下拉選單的值,然後組成jquery的json資料格式然後回傳//   
       
case 'first':   $query = sprintf("SELECT C_name FROM company WHERE class1= '$parentId' ORDER BY C_name ASC");   $result = mysql_query($query, $mio);  
       
while ($row = mysql_fetch_assoc($result)) {   $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["C_name"] . '\',\'Text\':\'' . $row["C_name"] . '\'},'; 
   
}    
   
break;    
   
}$list .= ']'; 
echo $list
;?>






以上就是簡單的二層動態選單應用



若是要使用三層的話,也是同樣的作法在新增一個欄位作jquery



給需要的人作參考.





  • 贊助網站       

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

  • 1 樓住戶:jack
    發表時間:2011-03-23

    關於Ajax,我想最棒的地方就是可以於背景呼叫資料庫傳值吧∼多重下拉式選單就是一項非常棒的Ajax應用;前幾天Jace丟過來一個國外的網址:jQuery.cascade : Cascading values from forms,這篇文章主要是在說明jQuery的cascade,而它就是用來實現多重下拉式選單的功能。

    花了一點時間實作了一下,發現非常簡單就能實現!以前我也作過類似的功能,可是花了我非常多的時間...jQuery把它包裝起來,讓一切變的簡單多了;以下是簡單的範例,給有需要的人參考吧:範例是三階層的關聯式多重下拉式選單,分為index.php(呈現頁)、action.php(Ajax後端資料處理頁)、以及jQuery的cascade

    index.php:











    第一項  
    第二項
    第三項





    action.php:


    // 資料庫設定
    $host_sql = "localhost";
    $username_sql = "username";
    $password_sql = "password";

    $link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");
    mysql_select_db('target', $link);
    mysql_query("SET NAMES UTF8");

    if (!empty($_GET['act'])) {
    $action = $_GET['act'];
    }

    if (!empty($_GET['val'])) {
    $parentId = $_GET['val'];
    }

    $list = '[';

    switch ($action) {
    case 'first':
    $query = "SELECT id, name FROM table where lv = 2 AND parentid= $parentId";
    $result = mysql_query($query, $link);
    while ($row = mysql_fetch_assoc($result)) {
    $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["id"] . '\',\'Text\':\'' . $row["name"] . '\'},';
    }
    break;
    case 'second':
    default :
    $query = "SELECT id, name FROM table where lv = 3 AND parentid = $parentId";
    $result = mysql_query($query, $link);
    while ($row = mysql_fetch_assoc($result)) {
    $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["id"] . '\',\'Text\':\'' . $row["name"] . '\'},';
    }
    break;
    }

    $list .= ']';
    echo $list;

    實作的重點是在資料的格式:

    list = [{'When':'A1','Value':'W','Text':'SubchildA1a'},
    {'When':'A1','Value':'X','Text':'SubchildA1b'},
    ];

    其中When代表上一階層的值,Value是此一階層的值,Test則是下拉式選單顯示的文字;要特別注意JavaScript是大小寫敏感的!實作這個範例途中,曾經被大小寫拖了一段時間...後來才發現∼所以這地方要特別注意!希望大家都能輕鬆寫出關聯資料庫的多重下拉式選單囉^^http://blog.roodo.com/taikobo0/archives/6166625.html





     共 1 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容:
    其他選項: