ld—jquery多级联动插件（明河作品）

发布于，归属于jquery插件。 前26个座位已被强势霸占！ 共有2,832人围观    

jquery多级联动插件明河曾经写过二个版本，期间得到各路朋友的不少反馈（特别是网名为Fox的朋友，提出的建议非常的详细而且很有建设性），不得否认seriesComboBoxs（jquery多级联动插件）存在诸多缺陷，比如：无法设置选择框的默认值。

于是明河决定重构query多级联动插件，由于相对于seriesComboBoxs变动相当大，所以明河将这个插件重新命名为ld，旧的seriesComboBoxs明河将不再做维护。

V1.2 更新：
  • 修正IE6下报“未指明的错误”
  • 修正IE6下无法选择默认值的问题
  • 修正取xml数据时出现“头部已经发送”的问题
ld V1.0相对于seriesComboBoxsV0.2的改进：
  • 可以设置选择框的默认值
  • 不再需要对联动的所有选择框添加id（需要有相同的样式名）
  • 新增几个新的使用方法
  • 简化了API
  • 使用新的事件机制

改动还是非常大的，建议使用ldV1.0。

使用教程

1、导入地区数据库（mysql）

数据库文件为teashop_region.sql，此数据库来源于ecshop，Fox曾告知明河此数据库并不全，很感谢Fox提供了一个新的数据库，下个版本将使用Fox提供的数据库。

2、连接数据库

请打开get_region.php，找到：

  1. $hostname = 'localhost';// 数据库服务器
  2.     $username = 'root';        // 数据库用户名
  3.     $password = '123';        // 数据库密码
  4.     $dbname   = 'ld';            // 数据库名

按照本地服务器的情况，自行修改。

3、引入jquery库、jquery.ld.js和示例css

  1. <link href="style/css/base.css" rel="stylesheet" type="text/css" />
  2. <link href="style/css/demo.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script src="js/jquery-1.4.2.min.js"></script>
  5. <script src="js/jquery.ld.js"></script>

4、建立4个打算联动的选择框

  1. <table width="700" border="0" cellspacing="0" cellpadding="0" class="tab1">
  2.   <tr>
  3.       <td>国家</td>
  4.       <td><select  class="ld-select-1" name="country">
  5.             <option value="">请选择你的国家</option>
  6.         </select>
  7.    
  8.     </td>
  9.     <td>省份</td>
  10.     <td><select  class="ld-select-1" name="province">
  11.             <option value="">请选择你的省份</option>
  12.         </select>
  13.     </td>
  14.     <td>城市</td>
  15.     <td><select class="ld-select-1" name="city">
  16.             <option value="">请选择你的城市</option>
  17.         </select>
  18.     </td>
  19.     <td>区县</td>
  20.     <td><select class="ld-select-1" name="county">
  21.             <option value="">请选择你的区县</option>
  22.         </select>
  23.     </td>
  24.   </tr>
  25. </table>

联动的选择框，必须要有相同的样式名，比如这里的“ld-select-1”。

5、初始化插件

  1. $(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"},
  2.                      style : {"width" : 120}
  3.                          });

ajaxOptions用于设置ajax获取数据的参数
style设置选择框的样式
留意这里的调用与明河之前写的seriesComboBoxs有明显差异。
seriesComboBoxs初始化：

  1. $.seriesComboBoxs({selects : ["#country","#province","#city","#county"],
  2.                             ajaxOptions : {"url" : "get_region.php"}     });

新的ld插件已经不存在selects参数。

6、ld参数设置

参数 默认值 类型 描述
ajaxOptions {
url : null,
type : ‘get’,
data : {},
dataType : ‘json’,
success : function(){},
beforeSend : function(){}
}

Object

ajax获取数据时的配置默认的数据源格式为json
defaultParentId 0 Number 默认父级id，设置为0，即获取parent_id为0的数据（示例中返回“中国”）
defaultLoadSelectIndex 0 Number 默认读取数据的选择框，尽量使用默认的，这个参数用于设置读取那个选择框的数据。
texts [] Array

默认选择框中的选中项，比如设置为：texts:['福建','福州','长乐']

那么三个选择框会分别加载数据，并且选中与texts中字符串相同的项
style null Object 选择框的样式
field {
region_id : "region_id",
region_name : "region_name",
parent_id : "parent_id"
}		 Object 前台处理后台返回的数据时所使用的字段名，一般采用默认的即可。

7、方法说明

使用ld的方法，先要获取ld的API，比如示例4：

  1. var $ld4 = $(".ld-select-4");                     
  2.     $ld4.ld({ajaxOptions : {"url" : "get_region.php"},
  3.                defaultParentId : 1,
  4.            style : {"width" : 120}
  5.              })    
  6.     var ld4_api = $ld4.ld("api");
方法1：texts

描述：用于获取联动选择框的字符串数据。
返回：数组，比如“['福建','泉州','丰泽']”

  1. var text = ld4_api.texts().join('');
方法2：selected

描述：用于设置选择框的选中值
参数：

  • t：数组，要选中的选择框的字符串
  • completeCallBack：回调函数，当选择框数据全部加载完毕后触发
  1. ld4_api.selected(['福建','泉州','丰泽'],function(){
  2.             var text = ld4_api.texts().join('');
  3.             alert(text);           
  4.         });
方法3：size

描述：获取联动选择框的数量

  1. ld4_api.size()
方法4：css

描述：设置选择框的样式

  1. ld4_api.css({"width" : 120})

作者结语

欢迎各路朋友反馈bug和建议，谢谢！

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

跟作者说两句

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

26个座位已被强势霸占！

  1. abx

    占时用不上

  2. 轩

    发现一个奇怪的现象，示例第一遍运行没有问题，可以设置默认地址，当第二遍运行时就无法设置了，示例3和示例4的就下拉框没有可选值了。等几分钟后运行又可以，不知是什么原因？

    明河共影回复于 2010年08月22日 10:19

    哦？我刚也去测试了下，没发现该问题。继续观察…..欢迎其他朋友测试轩发现的这个问题，谢谢。

  3. 游客

    在google浏览器中,级联效果点第一次没有值,点第二次的时候才有
    另外建议把数据保存为js文件

  4. test

    初始化选择怎么办？ 就是用户修改 自己的地区，我用户表地区存的是ID，难道还要在region表里把地区名读出来再用ld4_api.selected(['中国','福建','厦门','思明']);？？

    明河共影回复于 2010年09月06日 9:58

    恩，取数据库，然后取地区名，日后我会允许直接使用id，我主要考虑使用['中国','福建','厦门','思明']比较直观。

    yile8回复于 2010年10月20日 6:04

    @明河共影, 首先若我现在就是用id存储的话。那么（下个版本将使用Fox提供的数据库）。对应城市的ID不一定一样吧。
    那么随后这个数据一致性的问题，博主是否考虑了？

    我现在在纠结，到底是实际地名存储，还是存储ID。

  5. www525

    在IE下测试：显示默认地区时只能显示吗默认的省，城市和区县无法默认显示，在FIREFOX下不存在这个问题。不知为何？作者能否修改一下？

    明河共影回复于 2010年09月25日 9:10

    诡异IE6下会报错，以前还很正常，我要调试下……

    明河共影回复于 2010年09月25日 10:19

    你好，www525 ，问题已经修正了，你可以下载新的压缩包。版本号为1.2

    www525回复于 2010年11月13日 4:01

    @明河共影, 为什么更新到v1.2,但是下载下来还是v1.0的版本？

  6. 同样问题

    @游客, 联动读取速度慢？需要等两三秒才能显示

    明河共影回复于 2010年10月05日 12:03

    取数据速度的快慢与程序关系不大。

  7. feng157aaa

    我按照楼主给的方法做，但是页面没有效果！请楼主详解!

  8. yulong

    我把你的插件改了下，默认选中状态我用了选项值对等默认选中，还有，就是，你用的是选项名称选中，那个有问题，如果，选项名称中包含符号的话，会选不中，我改成了，直接等于，不用正则来判断。很喜欢你的作品！

    明河共影回复于 2011年02月15日 9:24

    哦？能把你的代码发一份给我吗？我也贴出来。

    yulong回复于 2011年02月16日 11:38

    @明河共影,
    把jquery.ld.jsa的
    /**
    * 选中包含指定文本的选择项
    * @param {Number} index 选择框的索引值
    * @param {String} text 文本
    * @return {Number} 该选择框的value值
    */
    function _selected(index,text){
    var id = 0;
    _that.$applyTo.eq(index).children().each(function(){
    if(text == $(this).attr(“value”)){
    $(this).attr(“selected”,true);
    id = $(this).val();
    return;
    }
    })
    return id;
    }
    这段改了主要是 if(text == $(this).attr(“value”)){
    使用方法没变。

  9. shifuy

    请问下 如果改成5级 要改什么地方？

  10. 小董

    正在用你的LD，在设置默值时谷歌浏览器下不能正常显示省份希望作者解决这个问题。。。

    明河回复于 2011年04月13日 3:51

    恩，最近比较忙，已经在计划中了。新版的ld代码丢了，现在压缩包上的是旧的，有bug。回头我要重新整理的。

  11. 小董

    呵！！对不起！！是opera浏览器刷新时省份就不行了，市，区都没什么大问题。。。

    明河回复于 2011年04月14日 9:03

    opera我没测试过……opera的份额太低了….

  12. 小董

    还有个问题，就是保存数据到数据库时，怎么才能保存名称呢？如：保存广东省，广州市，天河区。。。那个value是ID，难道又要用ID从数据库查询才能保存吗？？

    明河回复于 2011年04月14日 1:43

    小董看我写的texts方法，比如你希望保存“广东省广州市天河区”这样的形式，新建一个隐藏域。监听下select事件ld4_api.selected(['福建','泉州','丰泽'],function(){
    var text = ld4_api.texts().join(”);
    $(“#area”).val(text );
    }); ld4_api请根据你的实际情况做修改。

    明河回复于 2011年04月14日 1:45

    日后我有考虑，自动生成一个隐藏域，用于保存完整地区数据。目前请使用API，使用API的好处是更灵活，比如你现在要保存成“广东省，广州市，天河区”，可以写成var text = ld4_api.texts().join(“，”); 如果你还有疑问，继续给我留言，我会尽量解惑。

  13. 冰封的心

    点击省可以选择好了
    再点击市没有数据，再点击一下市才有，请问这是什么问题呢？因为网络原因吗？

同类