3kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄?kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。
    自制Jquery樹形選擇插件.
    對付各種樹形選擇（省市，分類..）90行Jquery代碼搞定，少說廢話直接上插件代碼。稍后介紹使用說明。是之前寫的一個插件的精簡版。
    1.Jquery插件代碼
    (function (j) {
      j.fn.attrs = function (option) {
        var root = this, data = [];
        //默認(rèn)參數(shù)
        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) { }
        };
        //參數(shù)合并
        def = j.extend({}, def, option);
        //是否初始化
        ispath() ? init() : create(def.str);
        //請求分類并選中
        function create(id, o, v) {
          if (!id || parseInt(id) == -1)
            return o.nextAll().remove();
          //創(chuàng)建select
          var select = j("<select></select>").hide();
          _b(select);
          //添加到容器內(nèi)
          if (o) o.nextAll().remove();
          root.append(select);
          //發(fā)起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';
        }
        //創(chuàng)建值
        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();
          })
        }
        //創(chuàng)建下拉框
        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;
        }
      }
    })($)
    
    
    4.如何使用
    <div id="attr"></div>
    <script type="text/javascript">
    (function($){
    $("#attr").attr(
     {
     url: '/ajax/GetSort/',//ajax 獲取的URL 服務(wù)器返回的是Json 數(shù)據(jù)
     str: root.attr("str") || '0',//獲取初始化的分類path.例如：23,45,90。在編輯的情況下能正確還原
     handel: function (v) {//數(shù)據(jù)處理的回調(diào)函數(shù)，表明如何對后臺數(shù)據(jù)進(jìn)行解析。 如[{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代碼搞定各種樹形選擇的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考