jquery 无限联动下拉插件-Powered by 25yicms

　　前些天写了一个无限下拉插件link_select，虽然功能比较薄弱，企业网站管理系统工作人员觉的但还是分享出来吧。

　　功能：

　　联动选择下拉，采用json存储（依赖于json.js），采用ajax请求获取数据（但是需要有pid，id结构）。

　　具体代码：
/**
 * 选择框联动插件
 */
;
(function($) {
    /**
     * 依赖json.js
     */
    function getJsonValue($container) {
        // 获取所有
        var result = new Array();
        var children = $container.children();
        var len = children.length;
        children.each(function(i) {
            var obj = {};
            obj.value = $(this).val();
            //console.log($(this).val()+"    " +this.options[this.selectedIndex].text );
            obj.text = this.options[this.selectedIndex].text;
            obj.index = i;
            obj.select = i == (len - 1) ? 1 : 0;
            result.push(obj);
        });
        return encodeURIComponent($.toJSON(result));
    }
    var l_methods = {
        //一次请求，填充值
        select_dom:function(_value,settings){
            for (idx in _value) {
                $("#"+settings.id).link_select('ajaxData',idx==0?0:_value[idx-1].value,_value[idx]);
            }
        },
        // 创建文件缩略图
        create_select_dom : function(data, settings,_value_obj) {
            $this = $(this);
            if (data == null || data.length == 0)
                return;
            var $link_select = $("").addClass("linkage_item");
            // 添加options
            $link_select.append('请选择...');
            for (idx in data) {
                if(typeof(_value_obj)!='undefined'&&_value_obj!=null&&_value_obj!=""){
                    if(_value_obj.value==data[idx][settings.keyName]){
                        $link_select.append(''
                                + data[idx][settings.valueName] + '');
                    }else{
                        $link_select.append(''
                                + data[idx][settings.valueName] + '');
                    }
                }else{
                    $link_select.append(''
                            + data[idx][settings.valueName] + '');
                }
            }
            // 绑定事件
            $link_select.change(function() {
                        // 如果有后续节点，直接删除了
                        $(this).nextAll().remove();
                        // 如果前面已经选择了，如果此处选择为空，不进行ajax请求，同时删掉后面的节点
                        if (this.value == "")
                            return;
                        // 发生onchang事件，发出ajax请求，获取子类数据
                         $("#"+settings.id).link_select('ajaxData', this.value);
                        // 同时更新节点的值
                        $('#' + settings.value_id).val(
                                getJsonValue($('#' + settings.id
                                        + "_link_container")));
                    });
            // 加入container
            $('#' + settings.id + "_link_container").append($link_select);
        },
        ajaxData : function(pid,_value_obj) {
            $this = $(this);
            var settings = $this.data("settings");
            $.ajax({
                   type: "POST",
                   url: settings.url,
                   dataType:"json",
                   async: false,
                   data: "pid=" + pid,
                   success: function(d){
                         if(d.code==200){
                            // 创建子select
                             $("#"+settings.id).link_select('create_select_dom', d.result,settings,_value_obj);
                         }
                   }
            });
 
        },
        init : function(options) {
            var default_data = [];
            return this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this = $(this);
                // Setup the default settings
                var settings = $.extend({
                    id : $this.attr('id'), // The ID of the DOM object
                    value_id : $this.attr('value-id'),
                    url : 'admin/region/list_json',
                    data : default_data,
                    keyName : 'id',
                    valueName : 'name'
                }, options);
 
                // Preview Div Wrap 创建缩略图容器
                var all_pic_container = $this.next();// 是否有容器
                // 如果不存在则新建一个
                if (!all_pic_container.hasClass('link_container')) {
                    all_pic_container = $('').attr('id',
                            $this.attr('id') + '_link_container').attr(
                            'value-id', $this.attr('value-id')).addClass(
                            'link_container').css('display', 'block');
                    $this.after(all_pic_container);
                }
                $this.data('settings', settings);
                var _in_value=$("#"+$this.attr("id")).val();
                if(_in_value!=""){
                    var _select_array=$.parseJSON(decodeURIComponent(_in_value));
                    $("#"+$this.attr("id")).link_select('select_dom', _select_array,settings);
                    return;
                }  
                // ajax 请求数据
                $("#"+$this.attr("id")).link_select('ajaxData', 0);
            });
        }
    };
 
    $.fn.link_select = function(method) {
        if (l_methods[method]) {
            return l_methods[method].apply(this, Array.prototype.slice.call(
                    arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return l_methods.init.apply(this, arguments);
        } else {
            $.error('The method ' + method + ' does not exist in $.linkselect');
        }
 
    };
})($);

　　插件样式：
.linkage_box {
    border: 1px solid #ccc;
    padding: 5px 10px;
    position: absolute;
    top: 20px;
    left: 10px;
    background: #fff;
    z-index: 9;
}
 
.linkage_box span {
    display: inline-block;
    margin-right: 10px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: #369;
}
 
.linkage_box .close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background: url(ico.png) no-repeat 98% -16px;
    text-indent: -99px;
    overflow: hidden;
}
 
.linkage_select {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 15px 2px 10px;
    background: url(ico.png) no-repeat 98% 0px;
    position: relative;
}
 
.link_container {
    position: relative;
    z-index: 100;
    width: 100%;
}
.linkage_item{margin-left: 5px;}

　　使用方法：

　　<input type="hidden" value-id="now_address" name="now_address" id="now_address" value="{{$bean.now_address}}"

　　定义一个dom对象。

　　调用方法：
$('#now_address').link_select({'url':'admin/test/for_link'，'keyName':'id','valueName':'name'});

　　参数说明：

　　keyName 表示 id的值

　　valueName 表示展现的值

　　url 请求的URL

　　下载地址：

　　http://pan.baidu.com/s/1qWseGQo