本文目录一览:
php二级联动菜单
我给你提供一个三级的
主页面是
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
title三级联动下拉列表/title
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
script type="text/javascript" src="/js/jquery.js"/script
script type="text/javascript"
!--
var temp;
var ids = ['province','city','eare1']; //默认要操作的三个ID,注意先后顺序,不可颠倒。
// 参数说明:pid是关联 的id (第二个参数) 的父级,n表示是第几级,(如第一级,第二级,第三级),selected 默认被选中的选择的主键
function getList (pid,id,n,selected) {
var list = document.getElementById(id);
$.post ('ajax.php?act=getList',{'pid':pid,'action':id},function (data) {
var temp1 = eval('('+ data +')'); //把传过来的字符串转化成一个JSON对象。
var leng = temp1.length;
var n = (n ids.length ) ? ids.length : n;
n = (n 0 ) ? 0 : n;
for (var j = n ; j ids.length ; j++)
{
var t = 'temp'+j
t = document.getElementById(ids[j]);
t.options.length = 1;
t.options[0]=new Option('请选择','*');
}
if (leng 0) {
list.length = leng + 1;
for (var i=0;i temp1.length ;i++ )
{
list.options[i+1]=new Option(decodeURI(temp1[i].key),temp1[i].val);
if (temp1[i].region_id == selected ) {
list.options[0].selected = 'selected';
}
if (selectedlist.options[i+1].value==selected){
list.options[i+1].selected = 'selected';
}
}
}
if(pid == '*') {
switch(id){
case 'city':
t = document.getElementById('city');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
break;
case 'eare1':
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
break;
}
}
if(document.getElementById('city')document.getElementById('city').value=='*'){
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
}
});
}
$(function () {
getList ('1','province',1);
//三个都写是为了修改的时候,请三个框中默认的都有选中的值,一般增加的时候只写第一个就可以了。
});
/script
/head
body
div
select name="yc1" id="province" onchange="getList (this.value,'city',1)"
option value="*" selected="selected"请选择/option
/select
select name="yc2" id="city" onchange="getList (this.value,'eare1',2)"
option value="*" selected="selected"请选择/option
/select
select name="yc3" id="eare1"
option value="*" selected="selected"请选择/option
/select
/div
/body
/html
AJAX 页面是
?php
$link = mysql_connect("localhost", "root", "123456");
mysql_select_db("mydatabase");
$act = isset ($_GET['act']) ? $_GET['act'] : '' ;
$action = isset ($_POST['action']) ? $_POST['action'] : '' ;
$pid = isset ($_POST['pid']) ? $_POST['pid'] : '' ;
$arr = array();
switch ($action) {
case 'province':
$sql = "select DISTINCT(province_name) val,province_id key from province order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res)){
$arr[] = $col;
}
break;
case 'city':
$sql = "select DISTINCT(city_name) val,city_id key from city where `province_id` = '".$pid."'
order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res)){
$arr[] = $col;
}
break;
case 'eare1':
$sql = "select DISTINCT(eare1_name) val,eare1_id key from eare1 where `city_id` = '".$pid."'
order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res)){
$arr[] = $col;
}
break;
}
mysql_close($link);
$list = array();
$i = 0;
foreach($arr as $k = $v){
foreach($v as $key = $value){
if(!preg_match("|^\d+|",$key)){
$list[$i][$key] = $value;
}
}
$i++;
}
print_r (json_encode ($list));
数据库关联是
表province 区域表
有ID province_id province_name三个字段
id是自增的 province_id为唯一
表CITY 城市表
有ID city_id city_name province_id
其中province_id与province表的province_id对应
id是自增的 city_id为唯一
最后一个表类似与city表
jquery.js可以到下载
如果有问题可以在晚上7-10点 在H!给我留言
求php横向二级联动菜单
1.数据封装成
[ {
id:'',
name:'',
submenu[
{id:'',name:'',link:''}
]
},
{...}
]
这种形式,submenu存的就是每个菜单的子菜单
2.对一级菜单加上mouseover 事件监听
(1) 在监听事件中获取当前菜单的位置
(2)将子菜单的列在一个div上,并将div显示一级菜单的右侧(需要自己计算相对位置)
(3) 子菜单的div添加鼠标移开事件,鼠标移开时子菜单隐藏
这就是这种菜单的一种实现方式,至于代码,还是你自己尝试着去写吧
3.如果嫌麻烦,网上也应该能找到类似的效果的源代码,直接用
求php二级联动下拉菜单
一般用ajax,比如:
大类的select onchange="xxx javascript函数(参数)"
参数就是大类的id值
在xxx javascript函数(大类id)里面
你用ajax把大类id传给一个php文件,这个php文件从数据库中取出这个大类下面的小类的值,再返回给当前的页面,当前的页面,再重新写小类的slelct。
比如小类的select是这样的:
div id='xiaolei_div'
select id="xiaolei_select"
xxxx
/select
/div
当当前页面获取到小类的值之后:
在js函数里面:
var xiaolei_div=document.getElementById('xialei_div');
var options='';
for(xxxx)
{
options=options+'option value="小类的id"小类的名称/option';
}
xiaolei_div.innerHtml='select id="xiaolei_select"'+options+'/select';
只是说说思路,代码现打的,可能有错误