JavaScript实际应用：简单二级联动菜单实现

<?php
class myconn{

var $conn;
var $result;

function myconn(){
   $this->conn=mysql_connect('localhost','root','1234');
   mysql_select_db('allin',$this->conn);
}

function process($sql){
   mysql_query('set names gbk');
   $result=mysql_query($sql);
   return $result;
}

}

?>
<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">

<option selected>请选择</option>

<?php
$conn=new myconn();
$sql="select * from topclass where parentid=0";
$result=$conn->process($sql);
while($data=mysql_fetch_array($result))
{
?>

<option value="<?php echo $data[0];?>"><?php echo $data[2];?></option>

<?php
   }

?>
</select>

<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</form>

<script language="javascript">

//获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);

//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{
select2[i] = new Array();
}

<?php
$conn=new myconn();
$sql="select * from topclass where parentid=0";
$result=$conn->process($sql);
$i=1;
while($data=mysql_fetch_array($result))
{
   $sql="select name from topclass where parentid='$data[0]'";
   $result2=$conn->process($sql);
   ?>select2[<?php echo ($i);?>][0] = new Option("==请选择==", " ");<?
   $j=1;
while($data2=mysql_fetch_array($result2))
{
?>
   select2[<?php echo ($i);?>][<?php echo $j;?>] = new Option("<?php echo $data2[0];?>", "<?php echo $data2[0];?>");
 

<?php
$j++;
}

$i++;

}

?>
function redirec(x)
{

document.frm.s2.length=1;
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}

if(select2[x].length==0)temp.options[0]=new Option("",""); //如果一级菜单为的子菜单项为空的时候，选择此一级菜单的时候，二级显示为空
temp.options[0].selected=true;

}
</script>