Javascript Jquery类名未正确显示

我在jquery下拉列表中使用jquery.scrollablecombo.js。但是当我在HTML中使用它而不是在类中使用它时，它会显示classname。请看这个例子

<div classname="searchBar cb_selectMain cb_down"></div>

因此，css没有正确显示

scrollablecombo.js的代码

(function($) {

    $.fn.scrollablecombo2 = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo2.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'cb_selectWrapper3'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'cb_selectMain3 cb_down'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select3'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99999);
                $wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',1000).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };


    $.fn.scrollablecombo = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'searchBar cb_selectWrapper'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'searchBar cb_selectMain cb_down'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99999);
                $wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',1000).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };
    $.fn.scrollablecombo.defaults = {

    };
    $.fn.scrollablecombo1 = function(options) {
        var opts = $.extend({}, $.fn.scrollablecombo1.defaults, options);
        return this.each(function() {
            $this = $(this);

            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            function findHighestZIndex(){
                var divs = document.getElementsByTagName('div');
                var highest = 0;
                for (var i = 0; i < divs .length; i++)
                {
                    var zindex = divs[i].style.zIndex;
                    if (zindex > highest) {
                        highest = zindex;
                    }
                }
                return highest;
            }

            /** 
            * hide the select element
            * graceful degradation
            */
            $this.hide();

            function makeScrollable($wrapper, $container){
                var extra           = 50;
                var wrapperHeight   = $wrapper.height() ;
                $wrapper.css({overflow: 'hidden'});
                $wrapper.scrollTop(0);
                $wrapper.unbind('mousemove').bind('mousemove',function(e){
                    var ulHeight    = $container.outerHeight() + 2*extra ;
                    var top         = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
                    $wrapper.scrollTop(top);
                });
            }

            /**
            * let's build our element structure
            */
            var $ul_e   = $('<ul />');

            $this.find('option').each(function(){
                var $option = $(this);
                var liclass = '';
                if($option.attr('selected'))
                    liclass = 'selected';
                var $li_e   = $('<li />',{
                    className   :   liclass,
                    html        :   '<a href="'+$option.val()+'">'+$option.html()+'</a>'
                });
                $ul_e.append($li_e);
            });

            var $wrapper_e  = $('<div />',{
                className   :   'share cb_selectWrapper2'
            });

            $wrapper_e.append($ul_e);

            var $control_e  = $('<div />',{
                //id            :   'ui_element',
                className   :   'share cb_selectMain2 cb_down2'
            });

            var $select_e   = $('<div />',{
                className   :   'cb_select2'
            });

            $select_e.append($wrapper_e).append($control_e);

            var $selected   = $ul_e.find('.selected');


            function openCombo(){
                var maxzidx = Math.max(findHighestZIndex(),99);
                $wrapper_e.css('z-index',parseInt(maxzidx+100)).show();
                $control_e.addClass('cb_up').removeClass('cb_down');
                makeScrollable($wrapper_e,$ul_e);
            }
            function closeCombo(){
                $wrapper_e.css('z-index',100).hide();
                $control_e.addClass('cb_down').removeClass('cb_up');
            }
            $control_e.html($selected.find('a').html())
                      .bind('click',function(){
                          (!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
                      }
            );
            $selected.hide();

            $this.parent().append($select_e);
            $this.remove();

            $ul_e.find('a').bind('click',function(e){
                var $this       = $(this);
                $control_e.html($this.html());
                var $selected   = $ul_e.find('.selected');
                $selected.show().removeClass('selected');
                $this.parent().addClass('selected').hide();
                closeCombo();
                e.preventDefault();
            });



        });
    };
})(jQuery);

（函数（$）{
$.fn.scrollablecombo2=函数（选项）{
var opts=$.extend（{}，$.fn.scrollablecombo2.defaults，options）；
返回此值。每个（函数（）{
$this=$（this）；
var o=$.meta？$.extend（{}，opts，$this.data（））：opts；
函数findHighestZIndex（）{
var divs=document.getElementsByTagName（'div'）；
var最高=0；
对于（变量i=0；i最高）{
最高=锌指数；
}
}
回报最高；
}
/** 
*隐藏选择元素
*优雅退化
*/
$this.hide（）；
函数makeScrollable（$wrapper，$container）{
var额外=50；
var wrapperHeight=$wrapper.height（）；
$wrapper.css（{overflow:'hidden'}）；
$wrapper.scrollTop（0）；
$wrapper.unbind（'mousemove'）.bind（'mousemove'，函数（e）{
var ulHeight=$container.outerHeight（）+2*额外；
var top=（e.pageY-$wrapper.offset（）.top）*（ulHeight wrapperHeight）/wrapperHeight-额外；
$wrapper.scrollTop（顶部）；
});
}
/**
*让我们构建我们的元素结构
*/
var$ul_e=$（“
”）；
$this.find（'option'）。每个（函数（）{
var$选项=$（此选项）；
var liclass=''；
如果（$option.attr（'selected'））
liclass='选定'；
变量$li_e=$（“
”{
类名：liclass，
html:'
});
$ul_e.追加（$li_e）；
});
变量$wrapper_e=$（''{
类名：“cb_selectWrapper3”
});
$wrapper_e.append（$ul_e）；
变量$control_e=$（''{
//id:'ui_元素'，
类名：“cb\U SelectMain 3 cb\U down”
});
变量$select_e=$（''{
类名：“cb_select3”
});
$select_e.append（$wrapper_e）.append（$control_e）；
变量$selected=$ul_e.find（'.selected'）；
函数openCombo（）{
var maxzidx=Math.max（findHighestZIndex（），99999）；
$wrapper_e.css（'z-index'，parseInt（maxzidx+1000））.show（）；
$control_e.addClass（'cb_up'）。removeClass（'cb_down'）；
可滚动（$wrapper\u e，$ul\u e）；
}
函数closeCombo（）{
$wrapper_e.css（'z-index'，1000）.hide（）；
$control_e.addClass（'cb_down'）。removeClass（'cb_up'）；
}
$control_e.html（$selected.find（'a'）.html（））
.bind（'单击'，函数（））{
（！$wrapper_e.is（‘：可见’）？openCombo（）：closeCombo（）；
}
);
$selected.hide（）；
$this.parent（）.append（$select_e）；
$this.remove（）；
$ul_e.find（'a'）。bind（'click'，函数（e）{
var$this=$（this）；
$control_e.html（$this.html（））；
变量$selected=$ul_e.find（'.selected'）；
$selected.show（）.removeClass（'selected'）；
$this.parent（）.addClass（'selected'）.hide（）；
closeCombo（）；
e、 预防默认值（）；
});
});
};
$.fn.scrollablecombo=函数（选项）{
var opts=$.extend（{}，$.fn.scrollablecombo.defaults，options）；
返回此值。每个（函数（）{
$this=$（this）；
var o=$.meta？$.extend（{}，opts，$this.data（））：opts；
函数findHighestZIndex（）{
var divs=document.getElementsByTagName（'div'）；
var最高=0；
对于（变量i=0；i最高）{
最高=锌指数；
}
}
回报最高；
}
/** 
*隐藏选择元素
*优雅退化
*/
$this.hide（）；
函数makeScrollable（$wrapper，$container）{
var额外=50；
var wrapperHeight=$wrapper.height（）；
$wrapper.css（{overflow:'hidden'}）；
$wrapper.scrollTop（0）；
$wrapper.unbind（'mousemove'）.bind（'mousemove'，函数（e）{
var ulHeight=$container.outerHeight（）+2*额外；
var top=（e.pageY-$wrapper.offset（）.top）*（ulHeight wrapperHeight）/wrapperHeight-额外；
$wrapper.scrollTop（顶部）；
});
}
/**
*让我们构建我们的元素结构
*/
var$ul_e=$（“
”）；
$this.find（'option'）。每个（函数（）{
var$选项=$（此选项）；
var liclass=''；
如果（$option.attr（'selected'））
liclass='选定'；
变量$li_e=$（“
”{
类名：liclass，
html:'
});
$ul_e.追加（$li_e）；
}
var $wrapper_e = $("<div />", {
    className: "searchBar cb_selectWrapper"
});

var $wrapper_e = $("<div />", {
    "class": "searchBar cb_selectWrapper"
});

$("div").addClass($(this).attr('classname'));