如何编写jquery插件来显示相关的子类别？

Question

I have an issue in displaying main category, followed by sub category then followed by sub category like this:

Main category
sub category
sub sub category
Main category
sub category
sub sub category

But Now it shows up like this:

Main category
Main category

sub category
sub category

sub sub category
sub sub category

Here's my script for plugin:

(function($){

$.fn.selection = function(options)
{
    var localThis = this;
    //var main = ['Arriving Soon'];
    var main = {'cat1':'a','cat2':'b','cat3':'c'};
    var divs;
    var sub;
    if(options){$.extend(main, options);}

    jQuery.each(main, function(index,value){
        //alert("value = "+index);
         divs = jQuery('<div />',{
            'text':index,
            'css':({
            'background-color':'yellow',
            'width':'100px',
            'height':'50px',
            'margin':'10px'})       
        }) .bind('click');
        jQuery.each(value, function(index2,value2){
            //alert(index2+" = "+value2);

       $(function(){
            sub = jQuery('<div />',{
            'text':index2+" [remove]",
            'css':({
            'background-color':'green',
            'width':'100px',
            'height':'50px',
            'margin':'10px'})
            });
            localThis.append(sub);
        }).bind('click',function()
        {
            sub2 = jQuery('<div />',{
            'text':value2+" [remove]",
            'css':({
            'background-color':'grey',
            'width':'100px',
            'height':'50px',
            'margin':'10px'})
            });
            localThis.append(sub2);
        });

        localThis.append(divs);


        });//inner loop

    });

};
})(jQuery);

Script that make use/calling of the plugin:

$(function()
{
    var a = [];
    a['cat1'] = {'test1':["sub1","sub2"],'test2':["sub3","sub4"]};
    a['cat2'] = {'test3':["sub5","sub6"],'test4':["sub7","sub8"]};
    a['cat3'] = {'test5':["sub9","sub10"],'test6':["sub11","sub12"]};
    $('div#main').selection(a);
});

HTML

<div id="main">

</div>

Answer 1

JS

(function($){

$.fn.selection = function(options)
{
    var localThis = this;
    //var main = ['Arriving Soon'];
    var main = {'cat1':'a','cat2':'b','cat3':'c'};
    var divs;
    var sub;
    if(options){$.extend(main, options);}

    jQuery.each(main, function(index,value){
        //alert("value = "+index);
         divs = jQuery('<div />',{
            'text':index,
            'css':({
            'background-color':'yellow',
            'width':'100px',
            'height':'50px',
            'margin':'10px'})       
        }).bind('click');
      localThis.append(divs);
      jQuery.each(value, function(index1, value1){
        sub = jQuery('<div />',{
            'text':index1+" [remove]",
            'css':({
            'background-color':'green',
            'width':'100px',
            'height':'50px',
            'margin':'10px'})
            });
            localThis.append(sub);
        jQuery.each(value1,function(index2,value2){
          sub = jQuery('<div />',{
            'text':value2+" [remove]",
            'css':({
            'background-color':'grey',
            'width':'100px',
            'height':'50px',
            'margin':'10px'})
            });
            localThis.append(sub);
        });
      });
    });
};
})(jQuery);


$(function()
{
    var a = {};
    a.cat1 = {'test1':["sub1","sub2"],'test2':["sub3","sub4"]};
    a.cat2 = {'test3':["sub5","sub6"],'test4':["sub7","sub8"]};
    a.cat3 = {'test5':["sub9","sub10"],'test6':["sub11","sub12"]};
    $('div#main').selection(a);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">

</div>

</div>