Framework7 - Smart Select



Smart select is an easy way of changing form selects to dynamic pages by using groups of checkboxes and radio inputs.

We can use smart select in various types as specified in the table below −

S.No Type & Description
1 Smart Select Layout

Smart select layout defines a list view inside the select element using smart-select class.

2 Smart Select with Search Bar

Smart select searches the elements by using search bar and enables it by setting the data-searchbar class to true.

3 Custom Page Title and Back Link Text

You can set the custom page title and back link for smart select using data-page-title and data-back-text attributes.

4 Open in Popup

Smart select can be open as popup by using the data-open-in attribute to popup.

5 Open in Picker

Smart select can be displayed as picker modal by setting the data-open-in attribute to picker.

6 Custom Icons, Colors and Images

You can define custom icon, color or image on the smart select by using the data-option-icon, data-option-color and data-option-image attributes respectively.

7 Multiple Select and Optgroup

Smart select allows to use multiple select and group options by using the multiple and optgroup attributes.

8 Multiple Select and Maxlength

Smart select allows to select limited number items by using the maxlength attribute.

You can have some more types of smart select, which can be used in different scenario as listed in the table below −

S.No Type & Description Attribute

Close Smart Select On User Select

You can close the smart select when the user selects any option.

data-back-on-select = "true"

Smart Select With Virtual List

Virtual list can used with smart select if you have lots of options.

data-virtual-list = "true"

Smart Select Color Themes

You can specify the color themes for form and navbar on smart select page.

data-form-theme = "color"

data-navbar-theme = "color"


Set Smart Select Value By Option Text

Value for smart select can be set by using the option value.


Open Smart Select Using JavaScript

You can open the smart select using JavaScript method.

myApp.smartSelectOpen (smartSelect)

  • smartSelect − It is HTMLElement or string parameter used to open specified smart select.


Adding Options Dynamically

You can add options dynamically to smart select, even if they are already opened.

myApp.smartSelectAddOption (select, optionHTML, index)

  • smartSelect − It is HTMLElement or string parameter used to open specified smart select.

  • optionHTML − It is required string element which can be used to add HTML option.

  • index − It specifies the index number for the new option.