DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery實例ajax應用之二級聯動
jQuery實例ajax應用之二級聯動
編輯:AJAX詳解     

Query實例的AJax應用之二級聯動的後台是采用PHP來做的,前台通過jquery的AJax方式實現二級聯動
數據庫表設計

csj_trade

id int(11) auto_increment
tname varchar(100)
tradeType int(11)

其中,id為主鍵自動索引,tname為行業名稱

,tradeType為一個標識,為0時,表示這條數據是大類;不為0,而是某個數字的時候,則這個數字表示其父級的id。
(1)主頁面

<script type="text/Javascript" src="/include/jquery/jquery-1.1.3.1.pack.JS"></script>
<select name="bTrade" id="bTrade">
	<option 

value="-1">——所屬行業大類——</option>
	<?
	$res1=result("select * from csj_trade where tradeType=0");
	while($rs1=MySQL_fetch_array($res1)){

?>
    <option value="<?=$rs1["id"]?>">——<?=$rs1["tname"]?>——</option>
	<?}?>
</select>
<span id="quote">

<select name="sTrade">
		<option value="-2">——行業小類——</option>
	</select>
</span>
<script 

language="Javascript">
$("#bTrade").change(function(){
 $("#quote").load("../include/getstrade.PHP?id="+$("#bTrade").val()); 

});
</script>
(2)getstrade.PHP<?
require_once("function.PHP");
header("Cache-Control: no-cache"); 

$id=verify_id($_GET["id"]);
$res=result("select * from csj_trade where tradeType=".$id);
$rt='<select name="sTrade" id="s_trade">';
while

($rs=MySQL_fetch_array($res)){
$rt.='<option value="'.$rs["id"].'">'.$rs["tname"].'</option>';
}
$rt.='</select>';
echo $rt;
?

>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved