使用jquery实现ajax省、市、县三级联动

发布于，归属于jquery教程。 前4个座位已被强势霸占！ 共有2,223人围观    

ld

这二周不断有人问我如何实现ajax三级联动，于是就做了个多级联动的组件（理论上来讲可实现N级联动）。后台是用php生成xml。

这里我没采用jquery插件的写法。使用面向对象写法。

源代码点击下面的下载按钮。

点此下载

该组件，明河已经重构，请查看《seriesComboBoxs — jquery多级联动插件（明河作品）》

运行脚本前，请先把citys.sql运行下，向数据库导入省、市、县数据。

初始化组件

  1. var comboBoxs =  new yijs.form.ComboBoxs({selects : ["#p","#c","#t"],
  2.                                                   url : 'getData.php'});
  1. <table width="400" border="0" cellspacing="0" cellpadding="0">
  2.   <tr>
  3.     <td><select  class="comboBox" id="p" style="margin-right:10px;"/></td>
  4.     <td><select class="comboBox"  id="c" width="100"  style="margin-right:10px;"/></td>
  5.     <td><select class="comboBox" id="t" width="100"  /></td>
  6.   </tr>
  7. </table>
  • selects：是个数组，对应选择框对象
  • url ：后台脚本路径

来看下yijs.form.ComboBoxs这个类的代码

  1. /**
  2. * 命名空间
  3. */
  4. var yijs = {};
  5. yijs.form = {};
  6. /**
  7. *构造函数
  8. * @param {Object} options
  9. */
  10. yijs.form.ComboBoxs = function(options){
  11.     //组件的默认参数
  12.     var defaults = {
  13.         /**选择框对象数组*/
  14.         selects : null,
  15.         /**后台脚本*/
  16.         url : null,
  17.         type : 'post',
  18.         dataType : 'xml'
  19.     };    
  20.     //覆盖默认参数
  21.     this.options = $.extend(defaults, options);   
  22.     this.selects = this.options.selects;
  23.     this.url = this.options.url;
  24.     //缓存，为一个对象字面量。
  25.     this.cache = {};
  26.     if(this.selects.length > 0){
  27.         //加载默认数据，向第一个选择框填充数据
  28.         this.load($(this.selects[0]),{'id' : 0});
  29.         for(var i=0;i<this.selects.length-1;i++){
  30.             //给除了最后一个选择框外的对象绑定change事件
  31.             this._change(i);
  32.         }
  33.     }
  34.  
  35. }
  36. yijs.form.ComboBoxs.prototype = {
  37.     /**
  38.      * 加载数据
  39.      * @param {Object} $select 将加载完的数据生成的html填充至该对象
  40.      * @param {Object} data 传递给后台的参数
  41.      */
  42.     load : function($select,data){
  43.             var _opts = this.options;
  44.             var _that = this;
  45.             var _param = data;
  46.             //有该id下的缓存，就使用缓存填充，不然使用ajax加载数据
  47.             if(this.cache[data.id]){
  48.                 $select.html(this.cache[data.id]);
  49.             }else{
  50.                 if(_opts.url != null){
  51.                     $.ajax({
  52.                         type: _opts.type,
  53.                         url: _opts.url,
  54.                         dataType : _opts.dataType,
  55.                         data :data ,
  56.                         beforeSend:function(){
  57.                                              
  58.                         },
  59.                         success: function(data){
  60.                                 var _html = _that._getoptions(data);
  61.                                 //将html代码写入缓存
  62.                                 _that.cache[_param.id] = _html;
  63.                                 //填充到相应选择框
  64.                                 $select.html(_html);                                
  65.                         },
  66.                         complete: function(){
  67.    
  68.                         }
  69.                     });                   
  70.                
  71.                 }                   
  72.             }       
  73.     },
  74.     /**
  75.      * 给指定的选择框绑定change事件
  76.      * @param {number} index 选择框对象数组索引值
  77.      */
  78.     _change : function(index){
  79.         var _that = this;
  80.         //绑定change事件
  81.         $(_that.selects[index]).change(function(){
  82.                 var _val = $(this).val();
  83.                 //第index+1个选择框开始加载数据
  84.                 _that.load($(_that.selects[index+1]),{'id' : _val});                          
  85.         })       
  86.     },
  87.     /**
  88.      * 将后台返回的xml数据转成html代码
  89.      * @param {xml} data 后台返回的xml数据
  90.      */
  91.     _getoptions : function(data){
  92.         var _arr = [];
  93.         var $record = $(data).find("record");
  94.         if($record.size()>0){
  95.             //遍历xml
  96.             $record.each(function(){
  97.                 var option = "<option value='"+$(this).find("value").text()+"'>"+$(this).find("text").text()+"</option>";                                  _arr.push(option);
  98.             })
  99.             return _arr.join('');
  100.         }
  101.         return '';
  102.        
  103.     }
  104.    
  105.  
  106. }

我已经加了较详细的中文注释，这里就不再说明，有问题的可以给我留言。

来看php脚本（getData.php）

  1. function runSQL($rsql) {
  2.     $hostname = 'localhost';            // 数据库服务器
  3.     $username = 'root';            // 数据库用户名
  4.     $password = '123';                // 数据库密码
  5.     $dbname = 'yijs';            // 数据库名
  6.     $connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
  7.     $db = mysql_select_db($dbname);
  8.     mysql_query('set names gbk');
  9.     $result = mysql_query($rsql) or die ('test');
  10.     return $result;
  11.     mysql_close($connect);
  12. }
  13.  
  14. header("Content-type: text/xml;charset=gbk");
  15.  
  16. if(isset($_POST['id'])){
  17.     $where = "WHERE f_up = ".$_POST['id']." ";
  18. }else{
  19.     $where = "WHERE f_up = 0 ";
  20. }
  21. $sql = "SELECT * FROM city $where";
  22. $result = runSQL($sql);
  23.  
  24. $xml = "<?xml version='1.0' encoding='gbk'?>";
  25. $xml .= "<root>";
  26. $xml .="<success>1</success>";
  27. $xml .="<total>0</total>";
  28. while ($row = mysql_fetch_array($result)) {
  29.     $xml .= "<record>";
  30.     $xml .= "<value>".$row['id']."</value>";
  31.     $xml .= "<text>".$row['name']."</text>";
  32.     $xml .= "</record>";
  33. }
  34. $xml .="</root>";
  35. echo $xml;

请自行修改里面的数据库配置信息。

后台接受的参数为id。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

4个座位已被强势霸占！

  1. kg21

    貌似下载链接失效了

    明河共影回复于 2011年03月23日 8:57

    非常抱歉，已经修正了。感谢反馈。

  2. 小雨

    下载里面是ld1.2 这个是什么东东啊 不能用啊！

    明河回复于 2011年06月07日 4:57

    ？有啊，我刚试过，可以下载。是zip压缩包。我可以确定的是可以用的，数据库什么都导好了？配置都配好了？

同类