Select

• 'fade'
• 'flip'
• 'pop'
• 'swing'
• 'slidevertical'
• 'slidehorizontal'
• 'slidedown'
• 'slideup'

• 'set' - Sets the value.
• 'clear' - Clears the value.
• 'cancel' - Dismisses the popup.

• text String - Text of the button.
• handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
  • 'set' - Sets the value.
  • 'clear' - Clears the value.
  • 'cancel' - Dismisses the popup.
• icon String (Optional) - Icon of the button.
• cssClass String (Optional) - Css class of the button.

buttons: [
    'set',
    {
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: function (event) {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]

buttons: [
    'set',
    {
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]

• textString - Specify the text of the element.
• valueString, Number - Specify the value of the element.
• groupString - Specify the group name.
• htmlString - The specified markup will be shown instead of the text in the wheels.
• disabledBoolean - If true the element will be disabled.

data: [
                    {
                        text: 'Paris',
                        value: '1',
                        group: 'Europe'
                    },
                    {
                        text: 'New York',
                        value: '2',
                        group: 'America',
                        disabled: true
                    }
                ]

• url - Specify the remote data source.
• dataField - The field from the response which contains the needed data.
• dataType - Specify the data type of the remote data. It could be 'json' or 'jsonp'. The 'jsonp' is required for cross-domain requests and use 'json' for same-domain requests.
• processResponse - A function which is called to process and return the data from the response.
• remoteFilter - If true the filtering will be managed from the remote source. The filter query will be passed as a parameter.

data: {
                    url: 'http://example.com/airports/',
                    remoteFilter: true,
                    dataType: 'jsonp',
                    processResponse: function (data) {
                        // process the response here
                    }
                }

• 'center' - The component appears as a popup at the center of the viewport.
• 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
• 'bubble' - The component appears as a bubble positioned to the element defined by the anchor option. By default the anchor is the original element.
• 'top' - The component appears docked to the top of the viewport.
• 'bottom' - The component appears docked to the bottom of the viewport.

It turns filtering on, when true. When filtering is on, a filter input will be shown above the wheels. Typing in the input will filter the select data and will also trigger the onFilter event.

• header: If true, group headers will be shown on the option wheel.
• groupWheel: If true, two wheels are generated, the first contains the optgroup labels or the data.group property values, and the second one contains the options of the selected group.
• clustered: If true, the option wheel will contain only the options from the selected group, otherwise it will contain all the available options and the group wheel is updated whenever the option wheel is scrolled to an option from another group.

group: {
    groupWheel: true,
    header: false,
    clustered: true
}

The input element to use with the picker.
By default a standard HTML input element is rendered.
When a modal display is used (the display option is not set to 'inline') this element gets the focus/click listeners that will trigger the component to open.

• 'liquid' - Wheels will expand to the maximum available width, but will not exceed the width set by the maxWidth setting. If maxWidth is not specified, the total width of all wheels will not exceed 600px. In 'top' or 'bottom' display mode this is the default behavior.
• 'fixed' or undefined - Wheels will expand to the size of the longest wheel value, but will not exceed the width set by the maxWidth setting.

• 'single' - Only one item can be selected at once.
• 'multiple' - Multiple items can be selected.
• Numeric value - The maximum number of items that can be selected.

Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform.

If the theme for the specific platform is not present, it will default to the Mobiscroll theme.

• 'android-holo' - Android 4.x theme
• 'android-holo-light' - Android 4.x theme (light version)
• 'bootstrap' - Bootstrap themes
• 'ios' - iOS theme
• 'ios-dark' - iOS dark theme (deprecated)
• 'material' - Material theme
• 'material-dark' - Material dark theme (deprecated)
• 'jqm' - Integrates with jQuery Mobile look & feel
• 'mobiscroll' - Mobiscroll theme
• 'mobiscroll-dark' - Mobiscroll dark theme (deprecated)
• 'wp' - Windows Phone Metro UI theme
• 'wp-light' - Windows Phone Metro UI theme (light version)

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
  • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onBeforeClose: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onBeforeShow: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onCancel: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onChange: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onClear: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onClose: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onDestroy: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • filterText: the filter input's value
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onFilter: function (event, inst) {
    }
});

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onInit: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: HTMLElement - The DOM element of the tapped item.
  • selected: Boolean - Selected state of the tapped item.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onItemTap: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onMarkupReady: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • windowWidth: Number - The window width.
  • windowHeight: Number - The window height.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onPosition: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • valueText: String - The selected value as text (if any).
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onSet: function (event, inst) {
    }
});

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • valueText: String - The selected value as text.
• inst: Object - The instance object of the select.

Example

mobiscroll.select('#mobiscroll', {
    onShow: function (event, inst) {
    }
});

Example

mobiscrollInstance.cancel();

Example

mobiscrollInstance.clear();

Returns: Object

• Returns the element back to its pre-init state.

Example

mobiscrollInstance.destroy();

Example

mobiscrollInstance.disable();

Example

mobiscrollInstance.enable();

Returns: Object

• The object instance.

Example

mobiscrollInstance.getInst();

Parameters

• temp (Optional): Boolean - If true, returns the temporary values (prior clicking the Set button).
• group (Optional): Boolean - If true, returns an array with the group and value in the order of the wheels.

Returns: String or Array

• The selected value or an array containing the selected values.

Example

mobiscrollInstance.getVal();

Parameters

• prevAnim (Optional): Boolean - If true, hide will not be animated.
• btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

    mobiscrollInstance.hide();
    

Returns: Boolean

• True if the component is visible, false if it's not.

Example

mobiscrollInstance.isVisible();

Parameters

• options: Object - A map of option-value pairs to set.

Example

mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});

Parameters

• check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

mobiscrollInstance.position();

Parameters

• data (Optional): Array of objects - Contains the new data for the select options.
• filter (Optional): String - Text for filtering after the data was updated.

Example

mobiscrollInstance.refresh();

Example

mobiscrollInstance.select();

Parameters

• value: String or Array - In case of a simple or grouped select value must be the value to be selected, in case of a multiple select value must be an array with the selected values.
• fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
• change (Optional): Boolean - If false, change event won't be triggered.
• temp (Optional): Boolean - If true, only temporary values are set.
• time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

mobiscrollInstance.setVal(5);

Parameters

• prevAnim (Optional): Boolean - If true, show will not be animated.
• prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

mobiscrollInstance.show();

Parameters

• el: Object - The element with tap event.
• handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Text for the empty state of the select wheels. The select will show this message, when the filtering is turned on and there are no results for the searched text.

Text for the select filter input placeholder. The filtering can be turned on with the filter option.

• Arabic: 'ar'
• Bulgarian: 'bg'
• Catalan: 'ca'
• Czech: 'cs'
• Chinese: 'zh'
• Croatian: 'hr'
• Danish: 'da'
• Dutch: 'nl'
• English: 'en' or 'en-US' or undefined
• English (UK): 'en-UK' or 'en-GB'
• Farsi: 'fa'
• German: 'de'
• Greek: 'el'
• Spanish: 'es'
• Finnish: 'fi'
• French: 'fr'
• Hebrew: 'he'
• Hindi: 'hi'
• Hungarian: 'hu'
• Italian: 'it'
• Japanese: 'ja'
• Korean: 'ko'
• Lithuanian: 'lt'
• Norwegian: 'no'
• Polish: 'pl'
• Portuguese (Brazilian): 'pt-BR'
• Portuguese (European): 'pt-PT'
• Romanian: 'ro'
• Russian: 'ru'
• Russian (UA): 'ru-UA'
• Slovak: 'sk'
• Serbian: 'sr'
• Swedish: 'sv'
• Turkish: 'tr'
• Vietnamese: 'vi'