使用php+JS製作二級選單導航

二級級聯選單在我去年的時候就用asp+js做過，而現在忽然拿出來再做的時候我發現我忘記了，而且原來用asp寫的程式都找不到了，真暈[emot]sweat[/emot]，於是到網上搜，找了半天，我發現網上的寫法各異，而且都特別複雜，這麼一個二級級聯菜單，有必要弄這麼複雜嗎？於是自己想重寫一個簡單的。在經過半小時左右的思考後，我完成了二級級聯菜單的設計和製作。

 
大致思路是這樣的：為了不讓先前的頁面刷新，我用iframe潛入了一個二級子頁面，用來讀取資料庫中的數據，最後把想要的數據傳遞給父級頁面，完成資料的選擇和轉移。

主要程式碼如下（部分程式碼有改動，但不影響功能）：
父頁reg.html：

<iframe src=”city.php” width=”300″ height=”22″ frameborder=”0″ scrolling=”no”></iframe> <input name=”city” type=”hidden” id=”city” value=”" />

子頁city.php：

<script language=”javascript” type=”text/javascript”> 
function goto(n){ 
this.location.href=”city.php?sh_id=”+n; 
} 
</script> 

<select name=”sh” onchange=”goto(this.value)”> 
<option>请选择所在省市</option> 
<?php 
include_once(”db.php”); 
$sql=”select * from province order by sh_id asc”; 
$result=mysql_query($sql); 
while($row=mysql_fetch_assoc($result)){ 
?> 
<option value=”<? echo $row[”sh_id”];?>” <? if($_GET[”sh_id”]==$row[”sh_id”]){echo &#39;selected=”selected”‘;}?>><? echo $row[”sh_name”];?></option> 
<?php 
} 
?> 
</select> 
<select name=”city” onchange=”parent.document.getElementById(&#39;city&#39;).value=this.value”> 
<option>选择你所在的城市</option> 
<?php 
if(!empty($_GET[”sh_id”])){ 
//echo “ok”; 
$sql=”select * from city where sh_id=”.$_GET[”sh_id”].” order by city_id asc”; 
$result=mysql_query($sql); 
while($row=mysql_fetch_assoc($result)){ 
?> 
<option value=”<? echo $row[”city_name”];?>”><? echo $row[”city_name”];?></option> 
<?php 
} 
} 
?> 
</select>

#

以上是使用php+JS製作二級選單導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！