jQuery实例ajax应用之二级联动_H5之家 - 中国HTML5教程资源分享第一站

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

>