原文連結 ==>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"); //這裡卡了很久 , 如果用載入的方式 會造 jquery.js 裡的data[0] 出現問題 . 原因不 jquery.js 裡的data[0] 出現問題 . 原因不明(程度不夠.....)

// 資料庫設定

$host_sql = "localhost";

$username_sql = "user";

$password_sql = "password";

$link = mysql_connect($host_sql, $username_sql, $password_sql) or die("無法連結資料庫");

mysql_select_db('table', $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 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);

?>

arrow
arrow
    全站熱搜

    jason0324 發表在 痞客邦 留言(1) 人氣()

    E-mail轉寄