[AJAX] jQuery的多重下拉式選單應用，當有預設值的時候－danielhuang030 的研究日誌

在多重下拉式選單的應用中，常常也會遇到已經有預設值的時候，這時候該怎麼辦呢？其實前陣子我也遇過這個問題，當初還花了一點時間尋找 jQuery的cascade 是不是有提供參數讓我輕鬆預設；不過拜完 Google 大神之後似乎是沒有什麼線索；所以最後我採用了一個很笨的方法，在頁面讀取完畢時如果有預設值的話，就直接丟一個 Ajax 取得第二層的選項。以下是實作的程式碼：（目前我只實作到二階層）

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";

    // 預設值設定
    $defaultParentId = '3';
    $defaultChildId = '13';

    $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>


<input type="hidden" name="defaultParentId" value="<?php echo $defaultParentId; ?>" />
<input type="hidden" name="defaultChildId" value="<?php echo $defaultChildId; ?>" />
　
第二項 <select id="myChildSelect">
<option value="">請選擇</option>
</select>

<script type="text/javascript">

// 如果已有預設值，即時送出 Ajax 呼叫
function getSelectedList(defaultParentId, defaultFirstChildId) {
    $.ajax({
        type: "get",
        url: 'action.php',
        data: { act: 'default', val: defaultParentId, child: defaultFirstChildId },
        dataType: "json",
        success: function (json) {
            $('select#myChildSelect').append(json.data);
        }
    });
};

$(function () {

    // 檢查是否有預設值
    if ($('input[name=defaultParentId]').val()) {
        getSelectedList ($('input[name=defaultParentId]').val(), $('input[name=defaultChildId]').val());
    }

    // 第一階層對應第二階層
    $('#myChildSelect').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; }
    });
});
</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'];
}

if (!empty($_GET['child'])) {
    $childId = $_GET['child'];
}

switch ($action) {
    case 'first':
        $list = array();
        $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 'default':
    default :
        $list = '';
        $query = "SELECT id, name FROM table where lv = 2 AND parentid= $parentId";
        $result = mysql_query($query, $link);
        while ($row = mysql_fetch_assoc($result)) {
            $list .= '<option value="' . $row["ID"] . '"';
            if ($childId == $row["ID"]) {
                $list .= ' selected="selected"';
            }
            $list .= '>' . $row["NAME"] . '</option>';
        }
        $list = array('data' => $list);
        break;
}

echo json_encode($list);

第二階層的選項，其實是用字串硬湊出來的，所以程式碼看起來還蠻醜的，請見諒。基本上用的概念只是在頁面讀取完畢以後直接送出 Ajax 而已，是蠻笨的方法；不過也不失為解決問題的一種方法啦！如果有其他適合的解法，有希望高手們能提供一下嚕！謝謝^^