Просмотр поста

И последнее на сегодня: стилизация Select с мультивыбором.

jQuery плагин:

/*-------------------------------------------------------------------*/
/* Multiple selectbar */
/*-------------------------------------------------------------------*/

(function($){
  jQuery.fn.multiselect = function(){

    var e;

/*-------------------------------------------------------------------*/

    var handler = function(){
        e = $(this);
        var eName = e.attr('name').substring(0, (e.attr('name').length - 2));

        var i = 1;
        e.find('option').each(function(){ $(this).attr('oid', i); ++i; });
        e.attr('eid', 'oms-' + eName).hide();

        $('<section></section>').addClass('ois-multiselect').attr('sid', 'oms-' + eName).insertAfter(e);
        e.find('option').each(function(){
            $('<section></section>').addClass('ois-item').text($(this).text())
            .attr('oidms', $(this).attr('oid'))
            .appendTo($('section[sid=oms-' + eName + ']'));

            ($(this).attr('selected') != 'selected') || $('section[sid=oms-' + eName + '] section.ois-item[oidms=' + $(this).attr('oid') + ']').addClass('checked');
        });

        $('section[sid=oms-' + eName + ']').find('section.ois-item').bind('click', function(){
            $(this).toggleClass('checked');

            e.find('option[oid=' + $(this).attr('oidms') + ']').removeAttr('selected');
            if($(this).hasClass('checked'))
                e.find('option[oid=' + $(this).attr('oidms') + ']').attr('selected', 'selected');
        });
    }

/*-------------------------------------------------------------------*/

    return this.each(handler);
  }
})(jQuery);

CSS:

/* Контейнер */
.ois-multiselect{
  background: #fff;
  border: 1px solid #d6dfe8;
  color: #6890ba;
  display: inline-block;
  min-height: 160px; max-height: 205px;
  width: 190px;
  overflow: auto;
}

/* Отдельный вариант выбора */
.ois-multiselect .ois-item{
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
  cursor: pointer;
  font-family: Helvetica;
  font-size: 9pt;
  font-weight: bold;
  margin-top: -1px;
  padding: 3px 15px;
}
.ois-multiselect .ois-item:first-child{ margin-top: 2px; }
.ois-multiselect .ois-item:last-child{ margin-bottom: 2px; }

/* Вариант выбора с наведенным курсором */
.ois-multiselect .ois-item:hover{ background: #f0f0ff; }

/* Выбранный вариант */
.ois-multiselect .ois-item.checked{
  background: #eaeaff;
  border-color: #fff;
}

Как и предыдущий плагин этот не задевает основного функционала селектбара и работает при отключенном JS, более того вызывать его нет нужды, так как предыдущий плагин сам определит обычный это селектбар или с мультивыбором и сам вызовет этот плагин.