：有更輕鬆簡單的方法，詳見[AJAX] jQuery的多重下拉式選單應用：Select box manipulation
關於Ajax，我想最棒的地方就是可以於背景呼叫資料庫傳值吧～多重下拉式選單就是一項非常棒的Ajax應用；前幾天Jace丟過來一個國外的網址：jQuery.cascade : Cascading values from forms，這篇文章主要是在說明jQuery的cascade，而它就是用來實現多重下拉式選單的功能。
花了一點時間實作了一下，發現非常簡單就能實現！以前我也作過類似的功能，可是花了我非常多的時間...jQuery把它包裝起來，讓一切變的簡單多了；以下是簡單的範例，給有需要的人參考吧：範例是三階層的關聯式多重下拉式選單，分為index.php（呈現頁）、action.php（Ajax後端資料處理頁）、以及jQuery的cascade
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() }
},
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() }
},
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 = '[';
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是大小寫敏感的！實作這個範例途中，曾經被大小寫拖了一段時間...後來才發現～所以這地方要特別注意！希望大家都能輕鬆寫出關聯資料庫的多重下拉式選單囉^^
留言列表
{{ article.title }}