3kb jQuery代码搞定各种树形选择的实现方法


Posted in Javascript onJune 10, 2016

自制Jquery树形选择插件.

对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码。稍后介绍使用说明。是之前写的一个插件的精简版。

1.Jquery插件代码

(function (j) {
  j.fn.attrs = function (option) {
    var root = this, data = [];
    //默认参数
    var def = { url: '/ajax/GetSort/', str: root.attr("str") || '0', handel: function (v) {
      return "<option value=" + v.id + ">" + v.type + "</option>"

    }, path: root.attr("val") || 0, sChar: ',', change: function (v) { }
    };
    //参数合并
    def = j.extend({}, def, option);
    //是否初始化
    ispath() ? init() : create(def.str);
    //请求分类并选中
    function create(id, o, v) {
      if (!id || parseInt(id) == -1)
        return o.nextAll().remove();
      //创建select
      var select = j("<select></select>").hide();
      _b(select);
      //添加到容器内
      if (o) o.nextAll().remove();
      root.append(select);
      //发起Ajax请求
      j.ajax({
        type: "GET",
        url: def.url,
        data: { id: id },
        dataType: "json",
        cache: true,
        success: function (json) {
          datainit(select, json, v);
        }
      })

    }
    function datainit(select, data, v) {
      _c(select, data).val(v || -1);
      if (select.children("option").length <= 1) {
        select.remove();
        return;
      }
      else
        select.removeAttr("style");
    }
    //判断是否符合格式
    function ispath() {
      return def.path && /^(\d{1,},)*\d{1,}$/.test(def.path) && def.path != '0,0,0';
    }
    //创建值
    function _v() {
      var v = new Array(), vtext = new Array();
      v.push(0);
      root.children("select").each(function () {
        if (j(this).val() > 0) {
          v.push(j(this).val());
          vtext.push(j(this).children("option[selected]").text())
        }
      })
      root.attr("val", v.join(','));
      root.attr("vtext", vtext.join(">"));
      def.change(v);
    }
    //初始化
    function init() {
      if (ispath()) {
        var list = def.path.split(def.sChar);
        for (var i in list) {
          create(list[i], null, list[++i]);
        }
        return;
      }
      alert("Error:分类出错!")
    }
    //绑定事件
    function _b(select) {
      select.bind("change", function () {
        create(j(this).val(), j(this));
        _v();
      })
    }
    //创建下拉框
    function _c(select, data) {
      select.append(j("<option value='-1'>==请选择==</option>"));
      for (var i = 0; i < data.length; i++) {
        select.append(j(def.handel(data[i])));
      }
      return select;
    }
  }
})($)

2.对付省市选择

3kb jQuery代码搞定各种树形选择的实现方法

3.对付各种让你蛋疼的无限级选择

3kb jQuery代码搞定各种树形选择的实现方法

4.如何使用

<div id="attr"></div>
<script type="text/javascript">
(function($){
$("#attr").attr(
 {
 url: '/ajax/GetSort/',//ajax 获取的URL 服务器返回的是Json 数据
 str: root.attr("str") || '0',//获取初始化的分类path.例如:23,45,90。在编辑的情况下能正确还原
 handel: function (v) {//数据处理的回调函数,表明如何对后台数据进行解析。 如[{id:32,type:"分类"}]
   return "<option value=" + v.id + ">" + v.type + "</option>"
  },
 path: root.attr("val") || 0,
 sChar: ',',//path 拆分的字符如果,path 为23|45|90 则 ‘|'
 change: function (v) { }//选择框修改处理事件
  };
);
})(jQuery)
</script>

以上这篇3kb jQuery代码搞定各种树形选择的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
js继承的实现代码
Aug 05 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
jquery处理json对象
Nov 03 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
关于网页中的无缝滚动的js代码
Jun 09 #Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 #Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 #Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 #Javascript
JavaScript事件学习小结(一)事件流
Jun 09 #Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 #Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 #Javascript
You might like
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python使用functools实现注解同步方法
2018/02/06 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python selenium循环登陆网站的实现
2019/11/04 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python实现画图软件功能方法详解
2020/07/28 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
小区门卫工作职责
2013/12/14 职场文书
消防安全管理制度
2014/02/01 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
材料化学专业求职信
2014/07/15 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS