Javatpoint Logo
Javatpoint Logo

Framework7 Smart Select

Framework7 Smart Select is used as an easy of changing form selects to dynamic pages. It uses a group of checkboxes and radio inputs.

Smart select can be used in various types of forms:

Index Type Description
1) Smart Select Layout Smart select layout is used to define a list view inside the select element using smart-select class.
2) Smart Select with Search Bar Smart select is used to search 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 It facilitates you to 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 You can display smart select 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 facilitates you to use multiple select and group options by using the multiple and optgroup attributes.
8) Multiple Select and Maxlength Smart select facilitates you to select limited number items by using the maxlength attribute.

Smart Select layout Example

Test it Now

Smart Select Search Bar Example

Test it Now

Custom Page Title and Back Link Text Example

Test it Now

Open in Popup Example

Test it Now

Open in Picker Example

Test it Now

Custom icons, colors and images Example

Test it Now

Multiple Select and Optgroup Example

Test it Now

Multiple Select and Maxlength Example

It facilitates you to select limited number items by using the maxlength attribute.

In this example maxlength is 3. So you can choose maximum of 3 cars.

Test it Now




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA