您的位置：首页 > Web前端 > JavaScript

php和javascript实现二级联动下拉菜单

2013-04-13 23:35 806 查看

数据库test

保存省的数据表province：id,p_name;

保存市的数据表city：id,p_id(对应的省的名字),c_name;

===============================分割线=====================

程序原理：

首先用php语句，把省份的信息都取出来放到一个数组$forum_data[]中，然后把市的信息放到另外一个数组$forum_data2[]中。

因为市的详细信息需要在js中调用，所以在js中写一个二维数组subcat2用来保存所有的市的信息（包括id以及对应的省的id还有对市的名字）。然后在js中定义一个函数 changelocation，在省的那个select中定义一个事件onChange="changelocation(document.myform.bigClass.options[document.myform.bigClass.selectedIndex].value)"，把选中的省的id传到函数changelocation中，然后函数根据省的id与二维数组subcat2中的p_id对照，然后生成对应的城市的option。

=================================分割线===================

代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全动态二级联动下拉列表</title>
</head>
<body>
<?
//连接数据库
$link = mysql_connect("localhost", "root", "")
or die("Could not connect : " . mysql_error());
mysql_select_db("test") or die("Could not select database");
mysql_query("SET NAMES GBK");
//获取所有的省份的信息
$sqlSel = "select * from province order by id ";
$result = mysql_query($sqlSel) or die("Query failed : " . mysql_error());

$forum_data = array();
while( ($row = mysql_fetch_array($result))!=false )
{
$forum_data[] = $row;
}

mysql_free_result($result);
//获取所有的市的信息
$sqlSel2 = "select * from city order by p_id desc";

if( !($result2 = mysql_query($sqlSel2)) )
{
die ( 'Could not query t_city list' );
}

$forum_data2 = array();
while( ($row2 = mysql_fetch_array($result2))!=false )
{
$forum_data2[] = $row2;
}

mysql_free_result($result2);
?>
<!-- js实现获取 省份的信息进而生成所有的市-->
<script language="JavaScript">
var onecount2;
subcat2 = new Array();
<?php
$num2 = count($forum_data2);
?>
onecount2=<?php echo $num2;?>;
<?
for($j=0;$j<$num2;$j++)
{
?>
//用subcat2保存所有的市的信息
subcat2[<? echo $j;?>] = new Array("<? echo $forum_data2[$j]['id'];?>","<? echo $forum_data2[$j]['p_id'];?>","<? echo $forum_data2[$j]['c_name'];?>");
<?
}
?>
//获取省份的id然后进而生成对应的市的下拉框
function changelocation(id)
{
document.myform.city.length = 0;
var id=id;
var j;
document.myform.city.options[0] = new Option('==选择城市==','');
for (j=0;j < onecount2; j++)
{
if (subcat2[j][1] == id)
{
document.myform.city.options[document.myform.city.length] = new Option(subcat2[j][2], subcat2[j][0]);
}
}
}
</script>

<form name="myform" method="post">

地址：	<select name="bigClass" onChange="changelocation(document.myform.bigClass.options[document.myform.bigClass.selectedIndex].value)"size="1">

<option selected>请选择省份</option>

<?php
$num = count($forum_data);

for($i=0;$i<$num;$i++)
{
?>
<option value="<?echo $forum_data[$i]['id'];?>"><?echo $forum_data[$i]['p_name'];?></option>
<?
}
?>
</select>
<SELECT name=city size=1 id="city">
<option selected value="">==选择城市==</option>
</select>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航