<< [AJAX] jQuery的多重下拉式選單應用 | 回blog首頁 | [AJAX] jQuery 的 lightBox >>

June 13,2008

[AJAX] jQuery的多重下拉式選單應用 PART2

昨天Jace傳授密技！原本 Ajax 回傳值我是用字串硬湊出來的，不過有密技可以用比較簡單易懂的方式呈現回傳資料，那就是PHP的json_encode！它會把陣列資料轉變成 json 的格式（其實原本 jQuery 吃的格式就是 json ），所以就不用辛苦的自己湊字串啦！提供第二種方法囉～修改過的地方用紅色標記：

index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cascade.js"></script>
<script type="text/javascript" src="jquery.cascade.ext.js"></script>
<script type="text/javascript" src="jquery.templating.js"></script>
</head>
<body>
第一項 <select id="myParentSelect">
<option value="">請選擇</option>
<?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");

    $query = "SELECT id, name FROM table where lv = 1";
    $result = mysql_query($query, $link);
    while ($row = mysql_fetch_assoc($result)) {
        echo '<option value="' . $row["id"] . '">' . $row["name"] . '</option>' . "\n";
    }

?>
</select>　
第二項 <select id="myFirstChildSelect">
<option value="">請選擇</option>
</select>
第三項 <select id="mySecondChildSelect">
<option value="">請選擇</option>
</select>

<script type="text/javascript">
$(function () {

    // 第一階層對應第二階層
    $('#myFirstChildSelect').cascade('#myParentSelect', {
    ajax: {
        type: "post",
        url:  'action.php',
        data: { act: 'first', val: $('#myParentSelect').val() },
        dataType: "json"
    },
    template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
    match: function(selectedValue) { return this.When == selectedValue; }
    });

    // 第二階層對應第三階層
    $('#mySecondChildSelect').cascade('#myFirstChildSelect', {
    ajax: {
        type: "post",
        url:  'action.php',
        data: { act: 'second', val: $('#myFirstChildSelect').val() },
        dataType: "json"
    },
    template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
    match: function(selectedValue) { return this.When == selectedValue; }
    });
});
</script>
</body>
</html>

action.php：

<?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 = array();

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)) {
            $arr = array ('When' => $parentId, 'Value' => $row["ID"], 'Text' => $row["NAME"]);
            $list[] = $arr;
        }
        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)) {
            $arr = array ('When' => $parentId, 'Value' => $row["ID"], 'Text' => $row["NAME"]);
            $list[] = $arr;
        }
        break;
}

echo json_encode($list);

哈，這樣就清楚多了呢！當然昨天用字串組的方式也可以囉，其所達到的效果是一樣的啦！提供另一種思考方向^^


Posted by taikobo0 at 樂多Roodo! │11:02 │回應(5) │引用(0) │AJAX
樂多分類：日記/一般 工具：編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/6171055
回應文章

不好意思的請問一下:
我改了你的code之後還是無法抓到第二層的資料,應該說action端抓不到前端的值,我改的地方有加上和加上的name,以及修改後端的一些變數,如$action和$parentId等...但是還是無法運作...可以請你指導一下還有哪些地方有遺漏的嗎
Posted by Matt.Lu at October 11,2008 17:49

你好～因為你提供的資訊有點少，我一時之間看不出來那裡有問題。建議你可以參考前篇的回應看看有沒有遺漏的地方；或是利用 print_r($_POST);exit; 看看 action.php 是不是真的有接到值；或是印出 SQL ，看看語法有沒有錯誤的地方。希望這樣能解決你的問題～^^
Posted by 台扣啵 at October 12,2008 20:49

我想我表達的不好,我現在的問題是,第一層的值傳不到第二層,讓第二層的選項跑不出來...目前為止我第一層的東西可以跑了但是點選一個值後,理論上...第二層應該會出現選項,但是選單沒有出現,不知道這是哪邊出了差錯,麻煩一下,謝謝
Posted by Matt.Lu at October 13,2008 14:43

我了解你遇到的問題，但是沒有錯誤訊息我實在不太能幫你解決...請利用自設的中斷除錯：
1. 在 action.php，利用 print_r($_POST);exit; 看看你傳的值 action.php 是不是真的有收到（建議用 firefox 的 firebug 除錯）
2. 值確定有傳入，在看看 SQL 語法是不是有錯誤；利用 echo 印出你的查詢 SQL，在丟到 phpMyAdmin 看有沒有錯誤訊息。
先從這二個方向試試看吧～
Posted by 台扣啵 at October 14,2008 01:00

謝謝您的回應,我找到我的問題了.
其實我的問題癥結點在於我沒有裝jquery的相關函數庫.
去把需要的東西弄上去後1->2就OK了.2->3的功能跟我想要的有點出入,但是我看了您提供網站的code裡面的chained功能然後修一下應該就可以了.
再次感謝
Posted by Matt.Lu at October 25,2008 21:08


回最上方