jQuery之ajax二级联动菜单
Tag: | Author: 老蒋 |
jQuery实例的ajax应用之二级联动的后台是采用php来做的，前台通过jquery的ajax方式实现二级联动
数据库表设计 csj_trade
id int(11) auto_increment
tname varchar(100)
tradeType int(11)
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>
- <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;
- ?>
Leave a comment
您必须 登录 后才能发表留言。