chris710908
 
   
|
分享:
▼
x0
|
1.請先下載jquery檔案 http://140.124.90.41...uery.rar2.解壓放置網站跟目錄資料夾下 PHP+MYSQL動態選單應用（by using Jquery） 一.需求頁面：test.php and action.php，test.php是下拉選單部份而action.php是jquery在後台處理下拉選單的頁面 二.test.php 首些請於</head>標籤前include以下程式碼,js我是放在跟目錄的jquery下 <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript" src="jquery/jquery.cascade.js"></script> <script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script> <script type="text/javascript" src="jquery/jquery.templating.js"></script> 頁面中的下拉選單有二-->class1選單顯示廠商類別名稱而c_name選單是依據class1的值顯示該類別下的所有廠商名稱 原始碼解釋過程如下： 第一層class1選單程式碼複製程式
<select name="class1[]" id="class1">
<option value="">Channel Type</option>
<?php// 資料庫設定開始mysql_select_db($database_mio, $mio);
$query = sprintf("SELECT DISTINCT class1 FROM company");//這地方請下sql語法撈出第一層選單資料
$result = mysql_query($query, $mio);//資料庫設定結束
//撈出資料庫廠商類別的值
while ($row = mysql_fetch_assoc($result)) { echo '<option value="' . $row["class1"] . '">' . $row["class1"] . '</option>' . "\n"; }?></select> 第二層c_name選單程式碼這部份只是純粹做下拉選單即可,他的值會利用jquery回傳產生 複製程式
<select name="c_name[]" id="c_name"><option value="">Store Name</option></select> 緊跟在第二層選單後插入jquery語法並送出至action.php作處理 複製程式
<script>
jQuery(document).ready(function(){ $('#c_name').cascade('#class1', {
//前面的c_name表示第二層選單的id,後面的class1表示第一層選單的id
ajax: { type: "GET", url: 'action.php',//傳送至action.php
data: { act: 'first', val: $('#class1').val() }//傳送變數act與val給action.php作判斷與處理 },
template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
match: function(selectedValue) { return this.When == selectedValue; } });});</script> 三.action.php程式碼解說 複製程式
<?php require_once('Connections/mio.php');//引入資料庫連結檔 ?>
<?phpheader('Content-Type:text/html;charset=BIG5');
// 資料庫設定mysql_select_db($database_mio, $mio);if (!empty($_GET['act']))
{ $action = $_GET['act'];}if (!empty($_GET['val']))
{ $parentId = $_GET['val'];}$list = '[';switch ($action) {
//如果act＝first情況,就將廠商類別為$parentId的廠商撈出來,而這個值就是test.php的第一層下拉選單的值,然後組成jquery的json資料格式然後回傳//
case 'first': $query = sprintf("SELECT C_name FROM company WHERE class1= '$parentId' ORDER BY C_name ASC"); $result = mysql_query($query, $mio);
while ($row = mysql_fetch_assoc($result)) { $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["C_name"] . '\',\'Text\':\'' . $row["C_name"] . '\'},';
}
break;
}$list .= ']';
echo $list;?> 以上就是簡單的二層動態選單應用 若是要使用三層的話,也是同樣的作法在新增一個欄位作jquery 給需要的人作參考.
[ 此文章被chris710908在2008-10-02 13:25重新編輯 ]
此文章被評分,最近評分記錄| 財富:100 (by andyz) | 理由: 獎勵 | |
|
|
|
|
 x0
[樓 主]
From： | Posted：2008-10-01 23:41 |
|
|
wenzen886
  
|
分享:
▲
▼
 你好 真的非常感謝，還有你那麼快就回帖了............. 我的資庫聯結應該沒有問題......因為第一層還連的到......... test會回傳 在dev-php中看到 如 get act=first get val=1 我在test和action也都試過，我也改用了你的方式...還是一樣的情形....... 我太笨了......... 能不能連資料庫的格式欄位也說一下...... 真不好意思......... 謝謝~~~
[ 此文章被wenzen886在2008-10-10 11:13重新編輯 ]
|
|
|
x0
[3 樓]
From：臺灣固網公司 | Posted：2008-10-10 10:11 |
|
|
wenzen886
|
分享:
▲
▼
你好~~~
那就麻煩你了.....
test.php
<html>
<?php require_once('mio.php');//引入資料庫連結檔 ?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁1</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.cascade.js"></script>
<script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script>
<script type="text/javascript" src="jquery/jquery.templating.js"></script>
</head>
<body>
<select name="class1[]" id="class1">
<option value="">Channel Type</option>
<?php
mysql_select_db($database_mio, $mio);
$query = sprintf("SELECT DISTINCT class1 FROM company");
$result = mysql_query($query, $mio);//資料庫設定結束
//撈出資料庫廠商類別的值
while ($row = mysql_fetch_assoc($result)) { echo '<option value="' . $row["class1"] . '">' . $row["class1"] . '</option>' . "\n"; }?></select>
<select name="c_name[]" id="c_name"><option value="">Store Name</option></select>
<script>
jQuery(document).ready(function(){ $('#c_name').cascade('#class1', {
ajax: { type: "GET", url: 'action.php',
data: { act: 'first', val: $('#class1').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 require_once('mio.php');//引入資料庫連結檔 ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁1</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.cascade.js"></script>
<script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script>
<script type="text/javascript" src="jquery/jquery.templating.js"></script>
</head>
<body>
<?header('Content-Type:text/html;charset=BIG5');
// 資料庫設定
mysql_select_db($database_mio, $mio);if (!empty($_GET['act']))
{ $action = $_GET['act'];}if (!empty($_GET['val']))
{ $parentId = $_GET['val'];}$list = '[';switch ($action) {
//如果act＝first情況,就將廠商類別為$parentId的廠商撈出來,而這個值就是test.php的第一層下拉選單的值,然後組成jquery的json資料格式然後回傳//
case 'first': $query = sprintf("SELECT C_name FROM company WHERE class1= '$parentId' ORDER BY C_name ASC"); $result = mysql_query($query, $mio);
while ($row = mysql_fetch_assoc($result)) { $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["C_name"] . '\',\'Text\':\'' . $row["C_name"] . '\'},';
}
break;
}$list .= ']';
#
# 資料表格式： `company`
#
CREATE TABLE `company` (
`id` int(11) NOT NULL,
`C_name` varchar(32) default NULL,
`grade` int(5) NOT NULL,
`class1` int(5) default NULL,
`no` int(5) NOT NULL,
`sex` varchar(5) NOT NULL,
`s_id` int(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
#
# 列出以下資料庫的數據： `company`
#
INSERT INTO `company` VALUES (1101, '柯劉育', 1, 2, 3, '', 0);
INSERT INTO `company` VALUES (1102, '林鉦傑', 2, 5, 45, '', 0);
INSERT INTO `company` VALUES (1103, '鐘意詳', 3, 5, 7, '', 0);
INSERT INTO `company` VALUES (1104, '莊仲成', 3, 7, 22, '', 0);
INSERT INTO `company` VALUES (1105, '蕭峻銘', 2, 2, 6, '', 0);
echo $list;?>
我本來想用在學校的，可以找出年級、班級再對應到學生姓名
我先用兩層的試試..試該不會和mysql的編碼有關吧???.
謝謝~~~~~
[ 此文章被wenzen886在2008-10-10 15:41重新編輯 ]
|
|
|
x0
[5 樓]
From：臺灣固網公司 | Posted：2008-10-10 15:27 |
|
|
chris710908
|
分享:
▲
▼
圖 1.
 我自己建立資料表.test.php 跟action.php 請按照我的步驟作.一定可以 1.進入mysql控制頁面,新建資料庫test並輸入資料表語法 複製程式
CREATE TABLE `company` (
`id` int(11) NOT NULL,
`C_name` varchar(32) default NULL,
`grade` int(5) NOT NULL,
`class1` int(5) default NULL,
`no` int(5) NOT NULL,
`sex` varchar(5) NOT NULL,
`s_id` int(10) NOT NULL,
PRIMARY KEY (`id`)
);
2.請確認跟目錄下有connection資料夾,裡面有mio.php.此為連接資料庫檔案.這部分請確認無誤.否則跑不出來 複製程式
<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_mio = "localhost";//預設為localhost
$database_mio = "...";//填入mysql資料庫名稱
$username_mio = "...";//mysql 帳號
$password_mio = "...";//mysql密碼
$mio = mysql_pconnect($hostname_mio, $username_mio, $password_mio) or trigger_error(mysql_error(),E_USER_ERROR);
?>
3.test.php 複製程式
<?php require_once('Connections/mio.php');//引入資料庫連結檔 ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新增網頁1</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.cascade.js"></script>
<script type="text/javascript" src="jquery/jquery.cascade.ext.js"></script>
<script type="text/javascript" src="jquery/jquery.templating.js"></script>
</head>
<body>
<select name="class1[]" id="class1">
<option value="">Channel Type</option>
<?php
mysql_select_db($database_mio, $mio);
$query = sprintf("SELECT DISTINCT class1 FROM company");
$result = mysql_query($query, $mio);//資料庫設定結束
//撈出資料庫廠商類別的值
while ($row = mysql_fetch_assoc($result)) { echo '<option value="' . $row["class1"] . '">' . $row["class1"] . '</option>' . "\n"; }?></select>
<select name="c_name[]" id="c_name"><option value="">Store Name</option></select>
<script>
jQuery(document).ready(function(){ $('#c_name').cascade('#class1', {
ajax: { type: "GET", url: 'action.php',
data: { act: 'first', val: $('#class1').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 require_once('Connections/mio.php'); ?>
<?php
header('Content-Type:text/html;charset=BIG5');
// 資料庫設定
mysql_select_db($database_mio, $mio);
if (!empty($_GET['act'])) {
$action = $_GET['act'];
}
if (!empty($_GET['val'])) {
$parentId = $_GET['val'];
}
$list = '[';
switch ($action) {
case 'first':
$query = sprintf("SELECT DISTINCT C_name FROM company WHERE class1= '$parentId' AND C_name!='' ORDER BY C_name ASC");
$result = mysql_query($query, $mio);
while ($row = mysql_fetch_assoc($result)) {
$list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["C_name"] . '\',\'Text\':\'' . $row["C_name"] . '\'},';
}
break;
}
$list .= ']';
echo $list;
?>
在我電腦都有跑出來.你試試看吧
|
|
|
x0
[8 樓]
From： | Posted：2008-10-12 16:17 |
|
|
|
