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;
?
>