Twitter-bootstrap add-on Basically, the code converts a large select list with optgroups into a more user-friendly tabbed Twitter-bootstrap component.

I'm not sure how much into detail I need to get but on GitHub I uploaded a working example. This is the first time I write a jquery plugin and any advise is welcome.

(function($) {
    $.fn.bootstrapSelect = function(options) {

        //Extend default options with those provided.
        var opts = $.extend({}, $.fn.bootstrapSelect.defaults, options);

        var topLevel='';
        var subLevel='';
        var selectedValue ='';
        var sectionActive = false;
        var selected = '';

        // Rewrite the info in the select box 
        $('optgroup',this).each(function(x) { //for each optgroup

            //get section label
            var sectionLabel = $(this).attr('label');

            //get section content
            var sectionContent = '';
            $('option',this).each(function(x) {

                /*Check if an option is selected, and set section active*/
                if ($(this).attr('selected')) {
                    selectedValue = $(this).attr('value');
                    sectionActive = true;
                }
                sectionContent += '&lt;a ';
                $(this).attr('selected') ? sectionContent += 'class="bsactive" ' : '';
                sectionContent += 'value="' + $(this).attr('value') + '"&gt;' + $(this).text() + '&lt;/a&gt;\n';
            });

            sectionActive ? selected = true : false;

            topLevel += '&lt;li';
            sectionActive ? topLevel += ' class="active"' : '';
            topLevel += '&gt;&lt;a href="#optgroup' + x + '" data-toggle="tab"&gt;' + sectionLabel + '&lt;/a&gt;&lt;/li&gt;\n';

            subLevel += '&lt;div id="optgroup' + x + '" class="tab-pane';
            sectionActive ? subLevel += ' active' : '';
            subLevel += '"&gt;\n' + sectionContent + '&lt;/div&gt;\n';

            sectionActive = false;

        });
        //Replacement tabbed select
        var tabbedselect = '&lt;div class="tabbable '+opts.position+'"&gt;\n';
        if ( opts.position != "tabs-below") tabbedselect += '&lt;ul class="nav nav-tabs"&gt;\n'+topLevel+'&lt;/ul&gt;\n';
        tabbedselect += '&lt;div class="tab-content"&gt;\n'+subLevel+'&lt;/div&gt;\n'
        if ( opts.position == "tabs-below") tabbedselect += '&lt;ul class="nav nav-tabs"&gt;\n'+topLevel+'&lt;/ul&gt;\n';
        tabbedselect += '&lt;/div&gt;\n';

        // Replace the select with the tabbed menu
        this.replaceWith(tabbedselect);

        // Add hidden input field with the selected value
        $("form").append('&lt;input type="hidden" name="'+opts.inputId+'" id="'+opts.inputId+'" value="'+selectedValue+'" /&gt;');

        //set first tab and content area active if nothing is selected
        if (selected == false) {
            $("div.tab-content div:first-child").addClass("active");
            $("ul.nav-tabs li:first-child").addClass("active");
        }

        // set input field value on click
        $(".tab-content a").click(function () {
            $("*").removeClass("bsactive");
            $(this).addClass("bsactive");       
            $('input#'+opts.inputId).attr('value', $(this).attr('value'));
        })
    };

    //default settings
    $.fn.bootstrapSelect.defaults = {
        'position' : 'tabs-left',
        'inputId'  : 'bootstrap-select'
    };

})(jQuery);
In order to be able to use this plugin on a page with multiple forms, I would recommend identifying the specific form that you are operating on. I can see that you are aware of the issue because you have been using the context parameter in most of the selectors, but since the &lt;form&gt; is an ancestor of this, it would need to be selected differently:

$("form").append(...


should be

$(this).ancestor('form').append(...


Also, I just wanted to mention a personal preference when working with HTML snippets generated by jQuery. Instead of having HTML in JS strings, like

$(this).ancestor("form").append(
    '&lt;input type="hidden" name="'+opts.inputId+'" id="'+opts.inputId+'" value="'+selectedValue+'" /&gt;'
);


I like to make hidden template elements, and then clone them, remove the .template class, set the attributes and inner html, and insert the clone into the document. For example:

// stylesheet:
.template { display: none; }

// html, near the end of the &lt;body&gt;:
&lt;input type="hidden" id="hiddenInputTemplate" class="template"/&gt;

// js:
$(this).ancestor('form').append(
    $('#hiddenInputTemplate')
    .clone()
    .removeClass('template')
    .attr('name', opts.inputId)
    .attr('id', opts.inputId)
    .val(selectedValue)
);


For a short example like this, it might not be worth the extra verbosity, but I do have reasons for doing it this way:


My editor can't highlight HTML code, and especially syntax errors, inside of JS strings.
I can read and understand this style a little faster, and I will read it more often than I will write it. Like I said, it's just personal preference.