PolicyGenius - Style Guide

Select 2 Widget

Select2 Widget Example

 
.mod-example
  .selectfield
    .field
      label for='select2' Proin aliquam tortor
      select.select2 id='select2'
        option disabled='disabled' selected='selected'
        option Aliquam sapien enim
        option In rhoncus orci et
        option Ut scelerisque nulla at sem
        option Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
 
$('.select2').select2({
  placeholder: 'Vestibulum ante ipsum',
  dropdownAutoWidth: false,
  containerCssClass: 'policygenius-select2-container',
  dropdownCssClass: 'policygenius-select2-drop-down'
});

Templating

 
.mod-example
  .selectfield
    .field
      label for='template' Nam metus massa, tempor vel tortor et
      select.select2template id='template'
        option disabled='disabled' selected='selected'
        option Pretium Vestibulum
        option Phasellus Id Nulla Convallis
        option Nec efficitur tortor
 
function formatDoctor (doctor) {
  if (!doctor.id) { return doctor.text; }
  var $doctor = $(
    '<div class='select2-template'>' +
      '<div>' +
        '<strong>' + doctor.text + '</strong>' +
        '<em>Specialist</em>' +
      '</div>' +
      '<div class='details'>' +
        '<span>1427-234 34th Ave.<br>Schenectady, NY 10012</span>' +
      '</div>' +
    '</div>'
  );
  return $doctor;
};

$('.select2template').select2({
  placeholder: 'Select your insurance',
  dropdownAutoWidth: false,
  containerCssClass: 'policygenius-select2-container',
  dropdownCssClass: 'policygenius-select2-drop-down',
  formatResult: formatDoctor
});