廣告廣告
  加入我的最愛 設為首頁 風格修改
首頁 首尾
 手機版   訂閱   地圖  簡體 
您是第 31091 個閱讀者
 
<<   1   2   3  下頁 >>(共 3 頁)
發表文章 發表投票 回覆文章
  可列印版   加為IE收藏   收藏主題   上一主題 | 下一主題   
chris710908 手機 會員卡
個人文章 個人相簿 個人日記 個人地圖
知名人士
級別: 知名人士 該用戶目前不上站
推文 x15 鮮花 x128
分享: 轉寄此文章 Facebook Plurk Twitter 版主評分 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片
推文 x0
[PHP][教學] PHP+MYSQL動態選單應用(by using Jquery)
1.請先下載jquery檔案
http://140.124.90.41...uery.rar

2.解壓放置網站跟目錄資料夾下

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) | 理由: 獎勵



自製婚紗照網頁
http://chrismaggie.m...et.net/
獻花 x0 回到頂端 [樓 主] From: | Posted:2008-10-01 23:41 |
wenzen886
數位造型
個人文章 個人相簿 個人日記 個人地圖
路人甲
級別: 路人甲 該用戶目前不上站
推文 x0 鮮花 x0
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

您好
感謝你的文章,我用了以後一直有問題,我選了第一層的廠商類別條件後,第二個條件的地方會變灰的,
不會出現廠商名稱,請問選了第一個條件後符合的應會自動出現,這個運作條件是會送出get val=#class1,到action然後回傳廠商名稱到test.php嗎?
謝謝~~


獻花 x0 回到頂端 [1 樓] From:臺灣固網公司 | Posted:2008-10-09 23:25 |
chris710908 手機 會員卡
個人文章 個人相簿 個人日記 個人地圖
知名人士
級別: 知名人士 該用戶目前不上站
推文 x15 鮮花 x128
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

<?php require_once('Connections/mio.php');//引入資料庫連結檔 ?>

上面的部份是連結mysql資料庫部份

網站跟目錄'Connections/mio.php'

檔案中視連結您mysql資料庫的重要資訊

請確認是否有連到資料庫

呈現灰色應該是沒有連到資料庫

mio.php程式碼

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_mio = "localhost";//預設為localhost
$database_mio = "mio";//填入mysql資料庫名稱
$username_mio = "root";//mysql 帳號
$password_mio = "xxx";//mysql密碼
$mio = mysql_pconnect($hostname_mio, $username_mio, $password_mio) or trigger_error(mysql_error(),E_USER_ERROR);
?>


ps:test.php跟action.php最上方都要加入
<?php require_once('Connections/mio.php');//引入資料庫連結檔 ?>

這段程式碼喔


自製婚紗照網頁
http://chrismaggie.m...et.net/
獻花 x0 回到頂端 [2 樓] From: | Posted:2008-10-10 00:15 |
wenzen886
數位造型
個人文章 個人相簿 個人日記 個人地圖
路人甲
級別: 路人甲 該用戶目前不上站
推文 x0 鮮花 x0
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

表情 你好
真的非常感謝,還有你那麼快就回帖了.............
我的資庫聯結應該沒有問題......因為第一層還連的到.........
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 |
chris710908 手機 會員卡
個人文章 個人相簿 個人日記 個人地圖
知名人士
級別: 知名人士 該用戶目前不上站
推文 x15 鮮花 x128
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

還是您先把你的程式碼貼上來
我看看是哪邊套用出現問題?


自製婚紗照網頁
http://chrismaggie.m...et.net/
獻花 x0 回到頂端 [4 樓] From: | Posted:2008-10-10 15:03 |
wenzen886
數位造型
個人文章 個人相簿 個人日記 個人地圖
路人甲
級別: 路人甲 該用戶目前不上站
推文 x0 鮮花 x0
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

你好~~~
那就麻煩你了.....
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 手機 會員卡
個人文章 個人相簿 個人日記 個人地圖
知名人士
級別: 知名人士 該用戶目前不上站
推文 x15 鮮花 x128
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

action.php

中的

header('Content-Type:text/html;charset=BIG5');

改成

header('Content-Type:text/html;charset=utf-8);

試試看


自製婚紗照網頁
http://chrismaggie.m...et.net/
獻花 x0 回到頂端 [6 樓] From: | Posted:2008-10-10 19:16 |
wenzen886
數位造型
個人文章 個人相簿 個人日記 個人地圖
路人甲
級別: 路人甲 該用戶目前不上站
推文 x0 鮮花 x0
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

謝謝~~
我也試了utf-8
還是一樣
~~~~ 表情


獻花 x0 回到頂端 [7 樓] From:臺灣固網公司 | Posted:2008-10-10 20:24 |
chris710908 手機 會員卡
個人文章 個人相簿 個人日記 個人地圖
知名人士
級別: 知名人士 該用戶目前不上站
推文 x15 鮮花 x128
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

圖 1.
 按這裡檢視圖片,登入論壇可以直接觀看

免費 加入會員 或由臉書 Google



我自己建立資料表.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;
?>


在我電腦都有跑出來.你試試看吧


自製婚紗照網頁
http://chrismaggie.m...et.net/
獻花 x0 回到頂端 [8 樓] From: | Posted:2008-10-12 16:17 |
kimopig
數位造型
個人文章 個人相簿 個人日記 個人地圖
路人甲
級別: 路人甲 該用戶目前不上站
推文 x0 鮮花 x1
分享: 轉寄此文章 Facebook Plurk Twitter 複製連結到剪貼簿 轉換為繁體 轉換為簡體 載入圖片

下面是引用wenzen886於2008-10-09 23:25發表的 :
您好
感謝你的文章,我用了以後一直有問題,我選了第一層的廠商類別條件後,第二個條件的地方會變灰的,
不會出現廠商名稱,請問選了第一個條件後符合的應會自動出現,這個運作條件是會送出get val=#class1,到action然後回傳廠商名稱到test.php嗎?
謝謝~~


應該是編碼的問題
如果把C_name中的文字改成數字
就可以正常顯示了

如果資料各在不同的資料表要做三階動態選單可以做出來嗎?
努用研究中


[ 此文章被kimopig在2008-10-12 23:45重新編輯 ]


獻花 x0 回到頂端 [9 樓] From:臺灣中華HiNet | Posted:2008-10-12 23:14 |

廣告
<<   1   2   3  下頁 >>(共 3 頁)
首頁  發表文章 發表投票 回覆文章
Powered by PHPWind v1.3.6
Copyright © 2003-04 PHPWind
Processed in 0.040703 second(s),query:16 Gzip disabled
本站由 簡榮宗律師 擔任常年法律顧問 | 免責聲明 | 本網站已依台灣網站內容分級規定處理 | 連絡我們 | 訪客留言