Multiline Option Select

by Neviton

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/custom/bootstrap.min.css">
<script src="//select2.github.io/dist/js/select2.full.js"></script>
<link rel="stylesheet" href="//select2.github.io/dist/css/select2.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <select class="form-control deal-type combo">
                <option value="" description="Veritatis voluptate reiciendis sint eos maiores deleniti tempora suscipit ex, explicabo nesciunt? Exercitationem tempore, tenetur sint impedit aliquid error repellendus ratione accusamus.">Selecione um tipo de promoção</option>
                <option value="1" description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo eaque, ducimus nobis distinctio porro!">Desconto</option>
                <option value="21" description="Soluta veritatis molestias quos voluptas expedita nisi, et tempore quasi, doloremque! Amet, ipsam, quibusdam! Sapiente impedit modi repellendus, minus alias deserunt repudiandae.">Desconto Progressivo - Valor do Pedido</option>
                <option value="41" description="Minima delectus reicindis possimus reprehenderit dolore illum. Odit laborum recusandae corporis doloribus dicta sapiente possimus deserunt accusantium libero, dolores magni reprehenderit.">Meio / Forma de pagamento</option>
                <option value="61" description="Facilis neque officiis accusantium magni, dolores ad non ducimus unde blanditiis aliquid, doloribus eaque saepe optio iure temporibus quae praesentium tempore est.">Desconto Progressivo - SKU</option>
            </select>
        </div>
    </div>
</div>

CSS

.container {
    margin-top: 10px;
}
.option-title {
    font-size: 12px;
    font-weight: bold;
    color: #777;
}
.option-description {
    font-size: 12px;
    font-style: italic;
    color: #999;
}

.select2-dropdown {
    top: 10px;
    border: none;
    border-radius: 4px !important;
    background-color: #eee;
    padding: 4px 0;
  /*  overflow: hidden;*/
}

.select2-dropdown:before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: -14px;
    left: 80px;
    border: 7px solid transparent;
    border-bottom-color: #eee;
}

.select2-results__options li {
    border-bottom: 1px solid #c0c0c0;
}

.select2-results__options li:last-child {
    border-bottom: none;
}

.select2-results__option--highlighted {
    background-color: #e5e5e5 !important;
}

JavaScript

$(".deal-type").select2({
  minimumResultsForSearch: Infinity,
  templateResult: function (state) {
      if (!state.id) { return state.text; }
      var $state = $(
          '<span class="option-title">' + state.text + '</span><br>' +
          '<span class="option-description">' + $(state.element).attr('description') + '</span>'
      );
      return $state;
  }
});