04
2013
07

#学习笔记#jquery实现select级联效果

网站用户信息设置或者注册页,经常会需要用到级联,这几乎是所有网站类应用的标配。

首先是数据库的设计,三级,那么建三个表,分别为province,city,area分别记录省,市,县(区)信息,其中通过一个fatherid来关联,县(区)的fatherid是市,市的fatherid是省。给一个相对还算挺全的省市县(区)三个表的数据。

 

db_mifan_us.sql.zip(右键另存为下载)

其次,比较不好实现的是怎么把用户已经设置过的信息显示给用户,用个比较讨巧的方法,分别把符合条件的省,市,县(区)查出来,用if来判断

PHP代码
  1. $province = $new['user']->findAll('area_province');  
  2. $city = $new['user']->findAll('area_city',array('fatherid'=>$strUser['province']));  
  3. $area = $new['user']->findAll('area',array('fatherid'=>$strUser['city']));  
XML/HTML代码
  1. <select id="province" name="province">  
  2.         <option value='0' >请选择省</option>  
  3.         {loop $province $k $v}  
  4.         <option value="{$v['provinceid']}" {if $strUser[province]==$v[provinceid]}selected="selected"{/if}>{$v['province']}</option>  
  5.         {/loop}  
  6. </select>  
  7. <span id="citySpan">  
  8.             <select id="city" name="city" onchange="selectArea();">  
  9.                 <option value="0">请选择市</option>  
  10.                 {loop $city $k $v}  
  11.                 <option value="{$v['cityid']}" {if $strUser[city]==$v[cityid]}selected="selected"{/if}>{$v['city']}</option>      
  12.                 {/loop}  
  13.             </select>  
  14. </span>  
  15. <span id="areaSpan">  
  16.             <select id="area" name="area">  
  17.                 <option value="0">请选择区</option>  
  18.                 {loop $area $k $v}  
  19.                 <option value="{$v['areaid']}" {if $strUser[area]==$v[areaid]}selected="selected"{/if}>{$v['area']}</option>      
  20.                 {/loop}  
  21.             </select>  
  22. </span>  

相对来说,这样级联就好实现的多了,一小段代码

JavaScript代码
  1. <script>  
  2.     $(document).ready(function(){  
  3.         $("#province").change(function(){  
  4.             var provinceid=$(this).val();  
  5.             $("#citySpan").load("{SITE_URL}index.php?app=user&ac=city&provinceid="+provinceid);  
  6.             $("#areaSpan").html("<select id=\"area\" name=\"area\"><option value=\"0\">请选择区</option></select>");  
  7.         });  
  8.     })  
  9.     function selectArea(){  
  10.         var cityid=$("#city").val();  
  11.         $("#areaSpan").load("{SITE_URL}index.php?app=user&ac=area&cityid="+cityid);  
  12.     }  
  13. </script>  

这里用到的是jquery的load方法,load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

load方法的语法

JavaScript代码
  1. load(url,data,function(response,status,xhr))  
参数 描述
url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)

可选。规定当请求完成时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
  • xhr - 包含 XMLHttpRequest 对象
« 上一篇下一篇 »