- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Smart Select
Description
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 |
|---|---|---|
| 1 | Close Smart Select On User Select You can close the smart select when the user selects any option. |
data-back-on-select = "true" |
| 2 | Smart Select With Virtual List Virtual list can used with smart select if you have lots of options. |
data-virtual-list = "true" |
| 3 | 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" |
| 4 | Set Smart Select Value By Option Text Value for smart select can be set by using the option value. |
smart-select-value |
| 5 | Open Smart Select Using JavaScript You can open the smart select using JavaScript method. |
myApp.smartSelectOpen (smartSelect)
|
| 6 | Adding Options Dynamically You can add options dynamically to smart select, even if they are already opened. |
myApp.smartSelectAddOption (select, optionHTML, index)
|