分類: 程式設計

程式相關資料 , 包含 web 語言 , cli , bash , python …

Jquery 動態選單 json 版

老王

註:3年後再來再重新用到這個例子 , 突然發現以前卡的點都有能解決了 , 經驗真的很重要 !!
原文連結 ==>http://blog.roodo.com/taikobo0/archives/6171055.html
原文已經寫的相當完整 , 但是我卻花了三天 DEBUG
db_connect.inc.php:

<?php
//資料庫設定
//資料庫位置
$db_server = "localhost";
//資料庫名稱
$db_name = "username";
//資料庫管理者帳號
$db_user = "database";
//資料庫管理者密碼
$db_passwd = "password";
//對資料庫連線
if(!@mysql_connect($db_server, $db_user, $db_passwd))
die("無法對資料庫連線");
//資料庫連線採UTF8
mysql_query("SET NAMES UTF8");
//選擇資料庫
if(!@mysql_select_db($db_name))
die("無法使用資料庫");
?>

index.php:

include("db_connect.inc.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
$query = "SELECT area FROM area"; //撈出你要的第一層資料
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="' . $row["area"] . '">' . $row["area"] . '</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
include("db_index/db_connect.inc.php");
if (!empty($_GET['act'])) {
$action = $_GET['act'];
}
if (!empty($_GET['val'])) {
$parentId = $_GET['val'];
}
$list = array();
switch ($action) {
case 'first':
$query = "SELECT sname FROM school where area='".$parentId."'";

$result = mysql_query($query,$link);
while ($row = mysql_fetch_assoc($result)) {
$arr = array ('When' => $parentId, 'Value' => $row["sname"], 'Text' => $row["sname"]);
$list[] = $arr;
}
echo $row;
break;
case 'second':
default :
$query = "SELECT uname FROM contact where sname = '".$parentId."'";
$result = mysql_query($query,$link);
while ($row = mysql_fetch_assoc($result)) {
$arr = array ('When' => $parentId, 'Value' => $row["uname"], 'Text' => $row["uname"]);
$list[] = $arr;
}
break;
}
echo json_encode($list);
?>