究了一下连动下拉菜单,共享一下,希望有人能继续完善。

菜单|下拉

PHP代码:--------------------------------------------------------------------------------

<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=??????">
<?
if( !( $link = mysql_connect() ) ){
fatal("Could not connect to local MySQL server.");
}

if( !mysql_select_db( "loaction", $link ) )
{
mysql_close( $link );
fatal("Could not select database <b>ParserSample</b>.");
}

$sql="select * from district order by locationid asc";
$query=mysql_query($sql,$link);
?>
<script language = "JavaScript">

var onecount;
onecount = 0;
subcat = new Array();
<?
$count=0;
while($rs=mysql_fetch_array($query)){
?>
subcat[<?=$count;?>] = new Array("<?=$rs['districtname'];?>","<?=$rs['locationid'];?>","<?=$rs['districtid'];?>","<?=$rs['areacode']?>","<?=$rs['zipcode']?>");
<?
$count++;
}
?>
onecount=<?=$count?>;

function GetCode(CityId){
var CityId=CityId;
var i;
for(i=0;i < onecount; i++){
if(subcat[i][2] == CityId){
document.FormData.AreaCode.value = subcat[i][3];
document.FormData.ZipCode.value = subcat[i][4];
}
}
}

function ClearCode(){
document.FormData.AreaCode.value = '';
document.FormData.ZipCode.value = '';
}

function getCity(locationid)
{
document.FormData.City.length = 0;

var locationid=locationid;

var i;
document.FormData.City.options[0] = new Option('==所选城市的地区==','');
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.FormData.City.options[document.FormData.City.length] = new Option(subcat[i][0], subcat[i][2]);
}
}

}
</script>
</head>
<body>
<form name="FormData" method="post" action="">
分类:<select name="Province" onChange="getCity(document.FormData.Province.options[document.FormData.Province.selectedIndex].value);ClearCode();" size="1">
<option selected>请选择你所在的省份</option>
<?
$sql1= "select * from loaction";
$query=mysql_query($sql1,$link);
$a=mysql_num_rows($query);
while($rs1=mysql_fetch_array($query)){
?>
<option value="<?=$rs1['loactionid'];?>"><?=$rs1['loactionname'];?></option>
<?}?>
</select>
<select name="City" onChange="GetCode(document.FormData.City.options[document.FormData.City.selectedIndex].value);">
<option selected value="">==所有地区==</option>
</select>
<INPUT TYPE="text" NAME="AreaCode"><INPUT TYPE="text" NAME="ZipCode">
<INPUT TYPE="submit">
</form>
</body>
</html>
<?
if(!empty($_POST['City'])){
echo $_POST['City'];
}
?>

表结构:

#
# 表的结构 `district`
#
# 创建时间: 2003 年 08 月 02 日 11:21
# 最后更新时间: 2003 年 08 月 02 日 11:21
#

CREATE TABLE `district` (
`locationid` int(10) NOT NULL default '0',
`districtid` int(10) NOT NULL auto_increment,
`areacode` varchar(4) NOT NULL default '',
`zipcode` varchar(6) NOT NULL default '',
`districtname` varchar(50) NOT NULL default '',
KEY `districtid` (`districtid`)
) TYPE=MyISAM AUTO_INCREMENT=7 ;

#
# 表`district`中数据locationid——省id;districtid——市id;districtname——市名称; areacode ——市区号;zipcode——市邮政编码
#

# --------------------------------------------------------

#
# 表的结构 `loaction`
#
# 创建时间: 2003 年 08 月 02 日 09:28
# 最后更新时间: 2003 年 08 月 02 日 10:36
#

CREATE TABLE `loaction` (
`loactionid` int(10) NOT NULL auto_increment,
`loactionname` varchar(50) NOT NULL default '',
KEY `loactionid` (`loactionid`)
) TYPE=MyISAM AUTO_INCREMENT=4 ;

#
# 表`loaction`中数据,loactionid——省id;loactionname——省名称
#

#表

时间: 2024-10-27 13:33:11

究了一下连动下拉菜单,共享一下,希望有人能继续完善。的相关文章

高分跪求无限级连动下拉菜单问题

问题描述 表的结构是这样的:id(主键)TreeParentIDTreeName10aa21aa31aa41aa51aa61aa....我用这种数据结构做了无限级树型菜单(增加,修改,删除).我想把这种数据结构改成无限连动(下拉菜单).有什么好办法吗?最好是无刷新的,高分跪求! 解决方案 解决方案二: 用ajax可以实现的.解决方案三: 可以用JS来实现!!你找找代码!很多的!解决方案四: 非ajax莫属.推荐prototype包装类解决方案五: createtableTree([id]intp

连动下拉菜单

菜单|下拉 <html><head><title>List</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script LANGUAGE="javascript"><!--var onecount;onecount=0;    subcat = new Array(

Fireworks制作下拉菜单教程介绍

  本教程是关于Fireworks制作下拉菜单教程的讲解,该文章共有4个部分,其中包括创建标题.创建切片.加上下拉菜单.子菜单定位相关步骤,以下请看正文: 创建标题 1,新建一个图像 2, 用矩形工具画一个长方形 3,用文字工具输入文字 创建切片 选中这个矩形,然后选择菜单insert -> slice(插入-切片). 加上下拉菜单 1,保持切片处于选中的状态,选择菜单insert -> pop menu,插入子菜单 2,在弹出的窗口内进行输入,text(文字)框内输入子菜单上要显示的文字 3

jQuery树形下拉菜单特效代码分享_jquery

本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考. 运行jQuery树形下拉菜单特效效果图: 为大家分享的jQuery树形下拉菜单代码如下 <head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="

javascript手风琴下拉菜单实现代码_javascript技巧

手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

Bootstrop实现多级下拉菜单功能_jquery

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap多级下拉菜单功能的实例代码. 先给大家看下效果图: - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 <head> <meta charset="UTF-8"> <title>Boots

Bootstrap+jfinal实现省市级联下拉菜单_javascript技巧

小小一个省市级关联菜单,却耗费了一个很多时间来摸索,原因在于对jquery不熟练,既然这么辛苦完成了一个组件,自然想要共享出来,让需要的人使用. 这只是一个基础版,后续还要再进行优化. 代码:省市级关联菜单下载地址 说明: sql语句就不再说了,里面有"city.sql"."provincial.sql"两个文件. 1.先说说获取数据 public void initProcitys() { logger.info("获取所在地区"); List

基于JavaScript实现单选框下拉菜单添加文件效果_javascript技巧

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type" content=&q