经过我努力的探索和反复试验，在用phpcms建站过程中终于实现了在javascript中使用php来连接mysql数据库，并读取数据库中的数据来实现二级联动下拉菜单，这对我来说收获不小。现在分享出来与大家一起学习和交流，相信也有和我一样在这方面困惑的朋友，大家一起学习了。
1. 首先准备mysql数据库中的数据【数据库名：phpcmsv9 数据表名：v9_category】
这里有两个tab便签即首页和地质，在不同的便签下有不同的洲和国家，现在我要完成的是单击首页或者地质，在下边的下拉框中显示对应的洲和国家。
2. 制作一个简单的html界面，两个下拉框代码如下
<select id="zhoucontent" name="zhoucontent" style="background-color:#E4F4F4; width:96px;" _disibledevent=>
<option>按洲选择</option>
{pc:content action="category" catid="$top_parentid" num="15" siteid="$siteid" order="listorder ASC"}
{loop $data $r}
<option value={$r[catid]}>{$r[catname]}</option>
{/loop}
{/pc}
</select>
<select id="guocontent" name="guocontent" style="background-color:#E4F4F4; width:96px;">
<option>按国家选择</option>
</select>
复制代码
在这里通过phpcms的内置pc标签，可以轻松实现在单击不同tab便签时将对应便签下的洲名加进来，若想把国家名加进来，我们这里通过javascript事件来添加。
3. 写changeselect()函数，在函数中我们要用到select动态添加选项的代码：document.getElementById("guocontent").options.add(new Option(text,value));
<script language="javascript" type="text/javascript">
var _disibledevent=>
subcat=new Array();
<?
$con= mysql_connect("localhost","root","123");
mysql_select_db("phpcmsv9",$con);
mysql_query('Set names utf8');
$result=mysql_query("select * from v9_category");
$count=0;
while($row=mysql_fetch_array($result))
{
?>
subcat[<?=$count?>]=new Array("<?=$row[9]?>","<?=$row[0]?>","<?=$row[5]?>");
<?
$count++;
}
?>
onecount=<?=$count?>;
function changeselect()
{
var mval=document.getElementById("zhoucontent").value;
document.getElementById("guocontent").options.length=1;
for(var i=0;i<onecount;i++)
{
if(subcat[2]==mval)
{
document.getElementById("guocontent").options.add(new Option(subcat[0],subcat[1]));
}
}
}
</script>
复制代码
最新评论