Question

I have a function which creates HTML elements out of a select box in order to allow styling. Here’s the code:

$.fn.jqTransSelect = function () {
    return this.each(function (index) {
        var $select = $(this);
        if ($select.hasClass('jqTransformHidden')) {
            return;
        }
        if ($select.attr('multiple')) {
            return;
        }
        var oLabel = jqTransformGetLabel($select);
        var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({
            zIndex: 10 - index
        });
        $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
        var $ul = $('ul', $wrapper).css('width', $select.width() + 10).hide();
        $('option', this).each(function (i) {
            var oLi = $('<li><a href="#" index="' + i + '">' + $(this).html() + '</a></li>');
            $ul.append(oLi);
        });
        $ul.find('a').click(function () {
            $('a.selected', $wrapper).removeClass('selected');
            $(this).addClass('selected');
            if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) {
                $select[0].selectedIndex = $(this).attr('index');
                $select[0].onchange();
            }
            $select[0].selectedIndex = $(this).attr('index');
            $('span:eq(0)', $wrapper).html($(this).html());
            $ul.hide();
            return false;
        });
        $('a:eq(' + this.selectedIndex + ')', $ul).click();
        $('span:first', $wrapper).click(function () {
            $("a.jqTransformSelectOpen", $wrapper).trigger('click');
        });
        oLabel && oLabel.click(function () {
            $("a.jqTransformSelectOpen", $wrapper).trigger('click');
        });
        this.oLabel = oLabel;
        var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper).click(function () {
            if ($ul.css('display') == 'none') {
                jqTransformHideSelect();
            }
            if ($select.attr('disabled')) {
                return false;
            }
            $ul.slideToggle('fast', function () {
                var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
                $ul.animate({
                    scrollTop: offSet
                });
            });
            return false;
        });
        var iSelectWidth = $select.outerWidth() + 15;
        var oSpan = $('span:first', $wrapper);
        var newWidth = (iSelectWidth > oSpan.innerWidth()) ? iSelectWidth + oLinkOpen.outerWidth() : $wrapper.width();
        $wrapper.css('width', newWidth);
        $ul.css('width', newWidth - 7);
        oSpan.css({
            width: iSelectWidth
        });
        $ul.css({
            display: 'block',
            visibility: 'hidden'
        });
        var iSelectHeight = ($('li', $ul).length) * ($('li:first', $ul).height());
        (iSelectHeight < $ul.height()) && $ul.css({
            height: iSelectHeight,
            'overflow': 'hidden'
        });
        $ul.css({
            display: 'none',
            visibility: 'visible'
        });
    });
};

What I’m wanting to do is take the ID’s of the original select boxes before they are hidden, and add them ass classes to the newly created $wrapper – how would I do this?

Thanks,
Chris

Answer 1

After:

    var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({
        zIndex: 10 - index
    });

Put:

    $wrapper.addClass($select.attr('id'));

Here is an example.