Smart Select

• Smart Select Layout
• Custom Option Icons, Colors and Images
• Multiple Select And <optgroup>
• Multiple Select and maxlength
• Different Display Value
• Smart Select App Methods
• Smart Select Parameters
• Smart Select Methods & Properties
• Smart Select Events
• DOM Events
• App and Smart Select Instance Events
• Smart Select Auto Initialization
• CSS Variables
• Examples

Smart select allows you to easily convert your usual form selects to dynamic pages with grouped radio or checkbox inputs. You can see such feature in many native iOS apps

Smart Select Layout

Smart select layout is pretty simple. It is a well known List View link with <select> inside and additional smart-select class on item-link:

<div class="list">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <!-- Select label -->
            <div class="item-title">Fruit</div>
            <!-- Selected value, not required -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>
</div>

Custom Option Icons, Colors and Images

You can also specify Smart Select page' list view element custom icon, image or color. We need to use additional data-option-icon, data-option-image attributes on smart select <select> (to set default image for all options) or on <option> to set image or icon on single option.

For single option we may also use data-option-color and data-option-class attributes to add specific option color or css class for additional styling

<li>
  <a href="#" class="item-link smart-select">
    <select name="fruits">
      <option value="apple" selected data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-1.jpg">Apple</option>
      <option value="pineapple" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-2.jpg">Pineapple</option>
      <option value="pear" data-option-color="orange" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-3.jpg">Pear</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
      </div>
    </div>
  </a>
</li>

Multiple Select And <optgroup>

We can also use multiple select and group options using <optgroup>. So if we add multiple attribute to our select then radio buttons on smart select page will be automatically converted to checkboxes:

<li>
  <a href="#" class="item-link smart-select">
    <!-- "multiple" attribute for multiple select-->
    <select name="car" multiple>
      <!-- options grouped within "optgroup" tag-->
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi" selected>Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

Multiple Select and maxlength

With multiple select we can also use maxlength attribute to limit number of possible selected items:

<li>
  <a href="#" class="item-link smart-select">
    <!-- "maxlength" attribute to limit number of possible selected items -->
    <!-- we won't allow to select more than 3 items -->
    <select name="car" multiple maxlength="3">
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi">Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

Different Display Value

Using data-display-as attribute on options we can show selected value in different way:

<li>
  <a href="#" class="item-link smart-select">
    <select name="days">
      <option value="monday" selected data-display-as="Mon">Monday</option>
      <option value="tuesday" data-display-as="Tue">Tuesday</option>
      <option value="wednesday" data-display-as="Wed">Wednesday</option>
      <option value="thursday" data-display-as="Thu">Thursday</option>
      <option value="friday" data-display-as="Fri">Friday</option>
      <option value="saturday" data-display-as="Sat">Saturday</option>
      <option value="sunday" data-display-as="Sun">Sunday</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Day</div>
      </div>
    </div>
  </a>
</li>

Smart Select App Methods

Let's look at related App methods to work with Smart Select:

Smart Select Parameters

Now let's look at list of available parameters we need to create Smart Select:

<div class="block searchbar-not-found">{{appendSearchbarNotFound}}</div>

<div class="block searchbar-not-found">Nothing found</div>

var smartSelect = app.smartSelect.create({
  ...
  on: {
    opened: function () {
      console.log('Smart select opened')
    }
  }
})

var app = new Framework7({
  smartSelect: {
    pageTitle: 'Select Option',
    openIn: 'popup',
  }
});

Smart Select Methods & Properties

So to create Smart Select we have to call:

var smartSelect = app.smartSelect.create({ /* parameters */ })

After that we have its initialized instance (like smartSelect variable in example above) with useful methods and properties:

Smart Select Events

Smart Select will fire the following DOM events on smart select element and events on app and smart select instance:

DOM Events

App and Smart Select Instance Events

Smart Select instance emits events on both self instance and app instance. App instance events has same names prefixed with smartSelect.

Smart Select Auto Initialization

If you don't need to use Smart Select API and your Smart Select is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional smart-select-init class:

<li>
  <!-- Add smart-select-init class -->
  <a href="#" class="item-link smart-select smart-select-init">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

In this case if you need to access created Smart Select instance you can use the app.smartSelect.get app method:

var smartSelect = app.smartSelect.get('.smart-select');

When using auto init you may need to pass additional parameters. In this case you may pass all additional parameters via data- attributes on smart select element:

<li>
  <!-- Pass parameters as kebab-case data attributes -->
  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="true" data-page-back-link-text="Go back">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  /*
  --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  */
}

<!-- Default Setup -->
<li>
  <a class="item-link smart-select smart-select-init">
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      <option value="pear">Pear</option>
      <option value="orange">Orange</option>
      <option value="melon">Melon</option>
      <option value="peach">Peach</option>
      <option value="banana">Banana</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
      </div>
    </div>
  </a>
</li>
<!-- Open In Popup + Searchbar + Multiple -->
<li>
  <a class="item-link smart-select smart-select-init" data-open-in="popup"  data-searchbar="true" data-searchbar-placeholder="Search car">
    <select name="car" multiple>
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        <option value="mazda">Mazda</option>
        <option value="nissan">Nissan</option>
        <option value="toyota">Toyota</option>
      </optgroup>
      <optgroup label="German">
        <option value="audi" selected>Audi</option>
        <option value="bmw">BMW</option>
        <option value="mercedes">Mercedes</option>
        <option value="vw">Volkswagen</option>
        <option value="volvo">Volvo</option>
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        <option value="dodge">Dodge</option>
        <option value="ford" selected>Ford</option>
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>
<!-- Open In Sheet -->
<li>
  <a class="item-link smart-select smart-select-init" data-open-in="sheet">
    <select name="mac-windows">
      <option value="mac" selected>Mac</option>
      <option value="windows">Windows</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Mac or Windows</div>
      </div>
    </div>
  </a>
</li>
<!-- Open In Popover -->
<li>
  <a class="item-link smart-select smart-select-init" data-open-in="popover">
    <select name="superhero" multiple>
      <option value="Batman" selected>Batman</option>
      <option value="Superman">Superman</option>
      <option value="Hulk">Hulk</option>
      <option value="Spiderman">Spiderman</option>
      <option value="Ironman">Ironman</option>
      <option value="Thor">Thor</option>
      <option value="Wonder Woman">Wonder Woman</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Super Hero</div>
      </div>
    </div>
  </a>
</li>