Updated on Jun 03, 2021

Modern jQuery combobox & dropdown

Use it in responsive webapps as a dropdown and scroller picker with desktop and mobile optimized look & feel

Advanced select component for single and multiple value selection. Provides a great alternative to the native dropdown with enhanced UX. Can be used on mobiscroll form elements or on any input, select and field.

The select can be picked up with the Framework and Complete licenses.

jQuery Select Select for jQuery and jQuery Mobile

Switch the layout between mobile & desktop
and see how it looks.

Select - Mobile & Desktop usage

Change demo
Mobile & Desktop usage
Download and try example

Use the select/combobox for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.

Use it on an existing form field, custom input, native select or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

Handle different screen sizes by setting it up responsively  Check out the responsive demo →

Select - Responsive behavior

Change demo
Responsive behavior
Download and try example

The select has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.

Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:

  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
  • use custom for setting a custom breakpoint

It is a good idea to change the display or controls option to tailor the UX. This way you can have a bottom positioned calendar on mobile, a popover anchored to the input on tablet and desktop display on large sceens.

Change the viewport

Select - Understanding display modes

Change demo
Understanding display modes
Download and try example

The select/combobox has five built-in display modes that can be controlled through the display option:

  • top - modal that slides down from the top
  • bottom - modal that slides up from the bottom
  • center - modal that shows up in the middle with a pop animation
  • anchored - modal that shows up anchored to an input or any dom element
  • inline - embeddable picker that is rendered into the markup without its own modal

Use the touchUi option to switch between touch optimized mobile renderign and pointer optimized desktop renderign. It can be dynamically switched with the help of the responsive option.

The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.

Want to see how to set up responsiveness?  Check out the previous example →

Select - Single select

Change demo

Single value selection is the default behavior of the picker. You can explicitly enable it by setting the selectMultiple to false.

You can dynamically switch between single and multiple select.

Looking for multiple select?  Check out the next example →

Select - Multiple select

Change demo

Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input, native select or rendered inline.

As an alternative to the checkbox list it works great for category filtering... eg. e-commerce solutions.

Looking for single value selection?  Check out the previous example →

Select - Disabled values

Change demo

Enforcing validation is essential to a great UX. It supports the following:

  • Disabled attribute - In case you are passing the data through markup: <option value="chi" disabled>Chicago</option>
  • Disabled property - In case you are using the data option: data: [ ... { text: 'Chicago', value: 'chi', disabled: true }]

Having invalids set up correctly not just enhances the UX, but improves performance.

Select - Theming capabilities

Change demo
Theming capabilities
Download and try example

The look and feel of the select can be deeply customized. There are four levels of customization:

  • Base themes: Choose between iOS, Material and Windows.
  • Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
  • Custom themes: Use the theme builder to customize the colors and make it match your brand.
  • Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

Select - Event hooks

Change demo

The select ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like onChange, onSet, onInit ... will be triggered.

For a complete list of events go to the documentation  See available lifecycle events →

Select - Localization

Change demo

All components are fully localized. In case of the select this covers button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

All settings can be manually overriden  See what options the localization impacts →

Select - RTL support

Change demo

RTL support is built in and can be explicitly controlled thorugh the rtl option. If not set, it is inherited from the locale settings.

Explore the different locales  Check out this example →

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Get started with Mobiscroll for Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Javascript

Give the components a try in a starter app or see how they look in your project.

Get started with Mobiscroll for Ionic Angular

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for Ionic React

Give the components a try locally and see how they look in your project.

Get started with Mobiscroll for jQuery

Give the components a try in a starter app or see how they look in your project.

Already have an account?
Simple two minute install guide for jQuery and jQuery Mobile
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this.

Copy code <link href="css/mobiscroll.jquery.min.css" rel="stylesheet" />
<script src="js/mobiscroll.jquery.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide for Javascript
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folders into your project

Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.

file-copy-arrows

Or you can just simply try and play with the examples right from the folder you just unpacked. You don't find the downloaded example? Download it again.

Include the mobiscroll CSS and JS resources in your files

Add this script before the closing </head> tag of your file

Copy code <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" />
<script src="js/mobiscroll.javascript.min.js"></script>

Make sure to have the CSS and JS files copied over as explained in Step 1.

Copy the code into your app

Grab the relevant parts and drop them into your JS, HTML and CSS files.

Copy JS
Copy HTML
Copy CSS
Take a look at what you've accomplished

Reload your application in your favorite browser

arrow-browser-reload@2x

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project

Copy command $ mobiscroll config react --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your JSX and CSS files.

Copy JSX
Copy CSS
Take a look at what you've accomplished

Run $ npm start in the root folder of your app

Copy command $ npm start

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your React project

Run the following command in the root folder of your React project

Copy command $ mobiscroll config ionic --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your TSX and CSS files.

Copy TSX
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project

Copy command $ mobiscroll config angular --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your Component, Template and Module files. For quick testing copy the css to into your project's style.css or style.scss.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ng serve in the root folder of your app

Copy command $ ng serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Simple two minute install guide
Step 1.
Install the CLI
Step 2.
Install Mobiscroll
Step 3.
Copy the code
Step 4.
Run the app
Install the Mobiscroll CLI from npm

You will be able to figure Mobiscroll with ease in your app with the CLI

Copy command $ npm install -g @mobiscroll/cli
Install Mobiscroll in your Angular project

Run the following command in the root folder of your Angular project

Copy command $ mobiscroll config ionic --version=5

You will be prompted to log in with your mobiscroll account. Set your password here

Copy the code into your app

Grab the relevant parts and drop them into your Component, Template and Module files. For quick testing copy the css to into your project's global.scss file.

Copy TS
Copy HTML
Copy Module
Copy CSS
Take a look at what you've accomplished

Run $ ionic serve in the root folder of your app

Copy command $ ionic serve

And voilà, everything should be running smoothly.

If something is not running correctly or if there is trouble

Check out these common errors and solutions or reach out and let us help you.

install-help-bck
Customize & try this demo locally
Sign in or start your free trial

We have to set you up with a trial for this to run 👍

Demos
Theme Select
Material
iOS
Windows
Language Locale