无限级联下拉菜单

(function ($){
    $.extend($.fn, {
        lSelect: function (id,urls,pid) {
            // 默认参数
              var settings = {
                url: urls, // 数据获取url
                parameter: pid, // 数据获取参数名称
                title: 'regionalName', // 定义JSON数据格式：选择名称
                value: 'id', // 定义JSON数据格式：选择值
                emptyOption: "请选择", // 选择提示,null表示无提示
                cssClass: "lSelect", // 下拉框css名称
                cssStyle: { "margin-right": "10px" }, // 下拉框左右css样式
                isFadeIn: true// 是否渐显
            };
              $('#'+id).attr('readonly','readonly');
            $('#'+id).each(function () {
                var $this = $(this);
                var selectGroupClass = "lSelect" + Math.round(Math.random() * 1000000);
                var items = {};
                var selectName = $this.attr("name");
                var defaultSelectedPath = $this.attr("defaultSelectedPath");


                if (defaultSelectedPath == null || defaultSelectedPath == "") {
                    addSelect($this);
                } else {
                    var $select = $this;
                    var defaultSelectedPathArray = defaultSelectedPath.split(",");
                    for (var i = 0; i < defaultSelectedPathArray.length; i++) {
                        var $nextSelect = addSelect($select, defaultSelectedPathArray[i]);
                        if ($nextSelect) {
                            $select = $nextSelect;
                        }
                    }
                }


                // 绑定Select元素
              
                function bindSelect(element) {
                  var text='';
                  $("#"+id).click(function(){
                 $('#areaBox select:gt(0)').empty();
                 addSelect(element);
                 element.find('option:eq(0)').attr('selected','selected')
                  element.find('option:eq(1)').removeAttr('selected')
                  })
                    element.bind("change", function () {
                        addSelect(element);
                        var val=element.val();
                        var id=element.find('option:selected').attr('id');
                        $(element).find('option').each(function(){
                        if($(this).val()==val) {text=$(this).text() ;return  false;}
                        })
                         $this.attr('area',id)
                        
                        $this.val(text);
                    });
                }
              
                // 获取Json数据
                function getJson(key) {
                    if (typeof (items[key]) == "undefined") {
                        var url = settings.url;
                        if (key != "lSelectRoot") {
                            var parameter = settings.parameter;
                            if (parameter != null) {
                           
                                if (url.indexOf("?") > 0) {
                                    url = url + "&" + parameter + "=" + key;
                                } else {
                                    url = url + "?" + parameter + "=" + key;
                                }
                            }
                        }
                        $.ajaxSetup({ cache: true, async: false }); //新增cache
                        $.getJSON(url, function (json) {
                            items[key] = json;
                        });
                    }
                    return items[key];
                }
                // 填充option
                function fill(element, key, selected) {
                    var json = getJson(key);
                    if (!json) {
                        return false;
                    }
                    var length = 0;
                    for (j in json) {
                        length++;
                    }
                    if (length == 0) {
                        return false;
                    } else {
                        element.empty();
                        if (settings.emptyOption != null) {
                            element.append('<option value="">' + settings.emptyOption + '</option>');
                        }
                        $.each(json.databody, function (id, object) {
                            var optionValue = "";
                             var id= object.id
                            if (id.indexOf("-") >= 0) {
                                var optionValueArray = id.split("-");
                                optionValue = optionValueArray[optionValueArray.length - 1];
                            } else {
                                optionValue= id;
                            }
                            var option;
                            if (selected && optionValue == selected) {
                                option = $('<option id="' + object.id + '" value="' + optionValue + '" selected>' + object.regionalNamee + '</option>');
                            } else {
                                option = $('<option  id="' + object.id + '" value="' + optionValue + '">' + object.regionalName + '</option>');
                            }
                            element.append(option);
                            
                        });
                        return true;
                    }
                }
                // 增加select
                function addSelect(element, selected) {
                    var $nextSelect;
                    var isFill;
                    if (element.is("select")) {
                        element.nextAll("." + selectGroupClass).remove();
                        if (element.val() == "") {
                            return;
                        }
                        element.after('<select class="' + settings.cssClass + ' ' + selectGroupClass + '" style="position:absolute;display:none;z-index:1300;white-space:nowrap"></select>');
                        $nextSelect = element.next("." + selectGroupClass);
                        isFill = fill($nextSelect, element.val(), selected);
                    } else {
                        element.after('<select class="' + settings.cssClass + ' ' + selectGroupClass + '" style="position:absolute;display:none;z-index:1300;white-space:nowrap"></select>');
                        $nextSelect = element.next("." + selectGroupClass);
                        isFill = fill($nextSelect, "lSelectRoot", selected);
                    }
                    var $obj=$('#'+id);      
                    var tt=$("."+settings.cssClass)
                       var x = tt.height()+10;
                    var y = 10+'px';
                    $("."+settings.cssClass).css({
                    "top" : x,
                    "left" : y,
                    "width" : $obj.width()-20,
                    'padding': '5px'
                    });
                    tt.eq(1).css({
                    "top" :2*x
                    })
                    tt.eq(2).css({
                    "top" : 3*x
                    })
                    tt.eq(3).css({
                    "top" : 4*x
                    })
                       tt.eq(4).css({
                    "top" : 5*x
                    })
                   
                   
                    if (isFill) {
                    var  t=0;
                        element.css(settings.cssStyle);
                        
                    $("#areaBox").click(function(){
                    t=0;
            if($nextSelect.find('option').length>1)t=1;
            else {return false;}
                    tt();
                    $(document).bind("click", function(e) {
                    if ($(e.target).closest("#areaBox").length > 0)
                    return false;
                    if ($(e.target).closest("#areaBox").length == 0) {
                    $("#areaBox").find('select').hide();
                    $(document).unbind("click");
                    }
                    });
            })
            var tt =function(){
              if(t){
              if($nextSelect.find('option').length>1)t=1;
            else {return false;}
                        if (settings.isFadeIn) {
                            $nextSelect.fadeIn();
                        } else {
                            $nextSelect.show();
                        }
                        bindSelect($nextSelect);
                        return $nextSelect;
                    } else {
                        $nextSelect.remove();
                    }
                    }
                    }
                }
            });
        }
    });
})(jQuery)