JQuery - my first plugin ever - I can't get data to store

Question

So this is my first jquery plugin. This is not quite finished, but I ran into a problem.

The general purpose of the function is to select the selection field and hide it, making it more beautiful, consisting of div, etc. For example, you might have:

<select class="beautify" id="items" name="select2" >
    <option value="opt1">Select A Brand</option>
    <option value="opt2">Option 2</option>
    <option value="opt3">Option 3</option>
    <option value="opt4">Option 4</option>
    <option value="opt5">Option 5</option>
    <option value="opt6">Option 6</option>
    <option value="opt7">Option 7</option>
    <option value="opt8">Option 8</option>
</select>

Then you could call:

$('select.beautify').beautify();

So, I have most of the animations working and such. I am trying to figure out how to store the values ​​of each parameter on their respective anchors. The data () function does not work. I need to save each parameter value in a binding and when the anchor is clicked, and then change the selection value to this.

Here is the plugin:

    (function($){
    $.fn.beautify = function() {

        var defaults = {
            suffix: 'beautify'
        };
        var options = $.extend(defaults, options);

        return this.each(function() {
            $(this).hide();
            var selectbox = $(this);
            var suffix = options.suffix;
            var id = $(this).attr('id');
            var mainElement = '';
            var headElement = id + 'head' + suffix;
            var choicesElement = id + 'choices' + suffix;

            // Build up the main element container
            mainElement += '<div id="';
            mainElement += id + suffix;
            mainElement += '">';
            mainElement += '</div';
            $(this).before(mainElement);

            // Add the head and choices sections
            $('#' + id + suffix).append('<div id="' + headElement + '"></div>');
            $('#' + id + suffix).append('<div id="' + choicesElement + '"></div>');

            // Take care of some styling
            $('#' + id + suffix).addClass('selectouter');
            $('#' + headElement).addClass('');
            $('#' + choicesElement).addClass('selectchoices');

            // Get the choices from the input dropdown
            $('#' + headElement).append($(this).children(':first').text());
            $(this).find('option').each(function(){
                $('#' + choicesElement).append('<a href="#">'+$(this).text()+'</a>');
                $('#' + choicesElement).slideDown();
                $('#' + choicesElement + ':last-child').data('testvar', $(this).val());
            });

            // Handle animations
            $('#' + choicesElement).hide();
            $('#' + headElement).click(function(){
                $('#' + choicesElement).slideToggle();
            });
            $('#' + id + suffix).mouseleave(function(){
                $('#' + choicesElement).slideUp();
            });

            // A new option has been clicked
            $('#' + choicesElement + ' a').click(function(event){
                event.preventDefault();
                $('#' + choicesElement).slideToggle();
                $('#' + headElement).html($(this).text());

                // Up to now, it all for looks, actually switch the select value here:
                alert($(this).data('testvar'));
            });

        });  
    };  
})(jQuery);

Despite the fact that this plugin is not finished yet, I am also grateful for the criticism.

Answer 1

, . . , , , . , ( ). , .

    (function ($) {
        $.fn.beautify = function () {

            var defaults = {
                suffix: 'beautify'
            };
            var options = $.extend(defaults, options);

            return this.each(function () {
                var selectbox = $(this).hide(),
                       suffix = options.suffix,
                       id = selectbox.attr('id'),
                       mainElement,
                       headElement = $('<div />', {id:  id + 'head' + suffix}),
                       choicesElement = $('<div />', {id: id + 'choices' + suffix});

                // Build up the main element container
               mainElement = $('<div />', {
                   id: id + suffix
               });
               selectbox.before(mainElement);

                // Add the head and choices sections
                mainElement
                    .addClass('selectouter')
                    .append(headElement)
                    .append(choicesElement);

                // Get the choices from the input dropdown
               headElement
                    .addClass('')
                    .append(selectbox.children(':first').text());

                selectbox.find('option').each(function () {
                var link = $('<a />', {
                    href: "#",
                    text:  $(this).text()
                }).data('testvar', $(this).val());

                    choicesElement.append(link)
                        .slideDown();
                });

                // Handle animations
                choicesElement.addClass('selectchoices').hide();

                headElement.click(function () {
                    choicesElement.slideToggle();
                });

                mainElement.mouseleave(function () {
                    choicesElement.slideUp();
                });

                // A new option has been clicked
                choicesElement.click(function (event) {
                    event.preventDefault();
                    choicesElement.slideToggle();
                   headElement.html(selectbox.text());

                    // Up to now, it all for looks, actually switch the select value here:
                    alert($(event.target).data('testvar'));
                });
            });
        };
    })(jQuery);