PHP+MYSQL动态选单应用（by using Jquery）

Home Home
登入注册发表列印 载入图片
引用 | 编辑 chris710908
2008-10-01 23:41		 楼主
▼
推文 x0
1.请先下载jquery档案
http://140.124.90.41/up/a/jquery.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

给需要的人作参考.

献花 x0
引用 | 编辑 wenzen886
2008-10-09 23:25		 1楼
▲   ▼
您好
感谢你的文章，我用了以后一直有问题，我选了第一层的厂商类别条件后，第二个条件的地方会变灰的，
不会出现厂商名称，请问选了第一个条件后符合的应会自动出现，这个运作条件是会送出get val=#class1,到action然后回传厂商名称到test.php吗?
谢谢~~

献花 x0
引用 | 编辑 chris710908
2008-10-10 00:15		 2楼
▲   ▼
<?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');//引入资料库连结档 ?>

这段程式码喔

献花 x0
引用 | 编辑 wenzen886
2008-10-10 10:11		 3楼
▲   ▼
表情 你好
真的非常感谢，还有你那么快就回帖了.............
我的资库联结应该没有问题......因为第一层还连的到.........
test会回传
在dev-php中看到
如
get act=first
get val=1

我在test和action也都试过，我也改用了你的方式...还是一样的情形.......
我太笨了.........
能不能连资料库的格式栏位也说一下......
真不好意思.........
谢谢~~~

献花 x0
引用 | 编辑 chris710908
2008-10-10 15:03		 4楼
▲   ▼
还是您先把你的程式码贴上来
我看看是哪边套用出现问题？

献花 x0
引用 | 编辑 wenzen886
2008-10-10 15:27		 5楼
▲   ▼
你好~~~
那就麻烦你了.....
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的编码有关吧???.
谢谢~~~~~

献花 x0
引用 | 编辑 chris710908
2008-10-10 19:16		 6楼
▲   ▼
action.php

中的

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

改成

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

试试看

献花 x0
引用 | 编辑 wenzen886
2008-10-10 20:24		 7楼
▲   ▼
谢谢~~
我也试了utf-8
还是一样
~~~~ 表情

献花 x0
引用 | 编辑 chris710908
2008-10-12 16:17		 8楼
▲   ▼

图 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
引用 | 编辑 kimopig
2008-10-12 23:14		 9楼
▲   ▼
下面是引用wenzen886于2008-10-09 23:25发表的 :
您好
感谢你的文章，我用了以后一直有问题，我选了第一层的厂商类别条件后，第二个条件的地方会变灰的，
不会出现厂商名称，请问选了第一个条件后符合的应会自动出现，这个运作条件是会送出get val=#class1,到action然后回传厂商名称到test.php吗?
谢谢~~


应该是编码的问题
如果把C_name中的文字改成数字
就可以正常显示了

如果资料各在不同的资料表要做三阶动态选单可以做出来吗?
努用研究中

献花 x0
引用 | 编辑 chris710908
2008-10-12 23:16		 10楼
▲   ▼
C_name是第二层选单
根据class1去塞选资料
不论是文字或数字都可以的

献花 x0
引用 | 编辑 wenzen886
2008-10-15 14:28		 11楼
▲   ▼
谢谢~~
我试出来了，真是太感谢了 表情
我用别的电脑就试出来了...
其怪一样的程式 ........

献花 x0
引用 | 编辑 chris710908
2008-10-15 14:41		 12楼
▲   ▼
ok.能用就好^^

献花 x0
引用 | 编辑 wenzen886
2008-10-15 15:37		 13楼
▲   ▼
你好
感谢你的帮忙，不过我觉的好像不是很稳，
我更资料库后竟然还出现旧的资料，有暂存档吗??
请问版大的。mysql的编码是那一种呀 ?
谢谢

献花 x0
引用 | 编辑 chris710908
2008-10-15 16:03		 14楼
▲   ▼
我的编码是big5的

献花 x0
引用 | 编辑 kimopig
2008-10-15 19:07		 15楼
▲   ▼
可以说明一下在不同的资料表下
做三阶动态选单该如何更改程式码
自己不知道从何下手

在一个资料表下己经可以做好三阶选单了
但是三个资料表还是有一些问题

可以请教一下如果在第三阶把下拉选单改成文字方块
需要改到那一些程式码了

献花 x0
引用 | 编辑 chris710908
2008-10-16 15:45		 16楼
▲   ▼
下面是引用kimopig于2008-10-15 19:07发表的 :
可以说明一下在不同的资料表下
做三阶动态选单该如何更改程式码
自己不知道从何下手

在一个资料表下己经可以做好三阶选单了
但是三个资料表还是有一些问题

可以请教一下如果在第三阶把下拉选单改成文字方块
需要改到那一些程式码了


要在不同资料表捞出资料～要在aciton.php中改写sql语法.才会把捞出来的值传回到test.php

另外你要改成文字方块？这样就不是连动选单了耶？这样作有什么特别需求吗

献花 x0
引用 | 编辑 kimopig
2008-10-16 22:34		 17楼
▲   ▼
下面是引用chris710908于2008-10-16 15:45发表的 :



要在不同资料表捞出资料～要在aciton.php中改写sql语法.才会把捞出来的值传回到test.php

另外你要改成文字方块？这样就不是连动选单了耶？这样作有什么特别需求吗


文字方块的作用是比如说在
第一阶中抓到大类
第二阶中抓到小类
第三阶中抓到材料号码
第四阶中的文字方块材料的规格，单位，一些细项。


有辨法在材料编号后一次抓到三个栏位的值给三个文字方块吗。

献花 x0
引用 | 编辑 emile
2009-12-22 01:10		 18楼
▲   ▼
谢谢您所提供的原始码
我已经可以顺利地操作二阶选单
不过有各问题想请教
当我选定第二阶的选项之后
我要如何将c_name的值叫出来并写进资料库中
因为我是了好几次，叫出来的值都不是我想要的
没办法，所以只好麻烦您
再次感激您的协助

献花 x0
引用 | 编辑 ham119
2011-05-24 09:42		 19楼
▲   ▼
请问仍可以问问题吗~~

献花 x0
引用 | 编辑 chris710908
2011-05-24 22:40		 20楼
▲   ▼
下面是引用 ham119 于 2011-05-24 09:42 发表的 : 到引言文
请问仍可以问问题吗~~

已经回您信箱啰^^

献花 x0
引用 | 编辑 John77
2011-07-13 15:20		 21楼
▲   ▼
您好：

我照您的程式做，但我选了第一层的系所类别条件后，第二个条件的地方会变灰的，不会出现教师名称，状况如http://140.121.175.3/cosar/test2.php网址所示。

在test2.php及action.php都有加入下面那一行的指令
<?php require_once('Connections/cosar.php'); ?>

并且在Connections资料夹内亦有cosar.php这个档案

test2.php程式码如下
<?php require_once('Connections/cosar.php');//引入资料库连结档 ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>国立台湾海洋大学海洋科学与资源学院教师着作目录</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="faculty[]" id="faculty">
<option value="">系所</option>
<?php
mysql_select_db($database_cosar, $cosar);
$query = sprintf("SELECT DISTINCT faculty FROM ref");
$result = mysql_query($query, $cosar);//资料库设定结束

//捞出资料库厂商类别的值
while ($row = mysql_fetch_assoc($result)) {   echo '<option value="' . $row["faculty"] . '">' . $row["faculty"] . '</option>' . "\n";   }?></select>
<select name="name_c[]" id="name_c"><option value="">教师</option></select>
<script>
jQuery(document).ready(function(){ $('#name_c').cascade('#faculty', {
ajax: {   type: "GET",   url: 'action.php',  
    data: { act: 'first', val: $('#faculty').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/cosar.php'); ?>

<?php
header('Content-Type:text/html;charset=utf-8');
// 资料库设定
mysql_select_db($database_cosar, $cosar);

if (!empty($_GET['act'])) {
  $action = $_GET['act'];
}
if (!empty($_GET['val'])) {
  $parentId = $_GET['val'];
}
$list = '['; switch ($action) {
  case 'first':
  $query = sprintf("SELECT DISTINCT name_c FROM ref WHERE faculty = '$parentId' AND name_c!='' ORDER BY name_c ASC");
  $result = mysql_query($query, $cosar);
  while ($row = mysql_fetch_assoc($result)) {
  $list .= '{\'When\':\'' . $parentId . '\',\'Value\':\'' . $row["name_c"] . '\',\'Text\':\'' . $row["name_c"] . '\'},';
    }
  break;
  }
$list .= ']';
echo $list;
?>

资料格式栏位如下：
栏位 型态 校对 属性 Null 预设值 附加 执行
refID int(10)   否   auto_increment          
fac_num int(10)   是 NULL          
tea_num int(10)   是 NULL          
name_c varchar(255) utf8_general_ci 是 NULL          
name_e varchar(255) utf8_general_ci 是 NULL          
faculty varchar(255) utf8_general_ci 是 NULL          
Year varchar(255) utf8_general_ci 是 NULL          
Month varchar(255) utf8_general_ci 是 NULL          
Journal varchar(255) utf8_general_ci 是 NULL          
Title varchar(255) utf8_general_ci 是 NULL          
volumn varchar(255) utf8_general_ci 是 NULL          
page varchar(255) utf8_general_ci 是 NULL          

实在找不出问题到底出在那里。另外这个方式除了能做动态下拉式选单，相关的档案是否会跟着变动，如选择某一系所后，列出该系所所有教师，再点选老师，则会将该位老师的相关着作都列出，语法会很困难吗。

敬请赐教，谢谢。

献花 x0
引用 | 编辑 ming218
2014-11-10 15:20		 22楼
▲   ▼
jquery.rar 档案不见了吗?
表情

献花 x0
引用 | 编辑 coolcat826
2014-11-17 00:37		 23楼
▲  
请问如果资料表是在两个资料表内怎么做动态选单?

献花 x0