Generic Picker With iOS Style UI - jQuery Selectscroll

File Size: 39.7 KB
Views Total: 4677
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Generic Picker With iOS Style UI - jQuery Selectscroll

Selectscroll is a JavaScript library that enables the user to select data from a touch-enabled smooth scroller similar to the iOS picker view.

The plugin makes it easier to pick some data with a better selection experience on the touch device.

Supports multi-column data selection that the selected values will be separated with a comma.

Depends on jQuery library and better-scroll.js.

See also:

How to use it:

1. Import jQuery library and the jQuery SelectScroll plugin's files in the HTML file.

<link rel="stylesheet" href="./main.css">
<script src="" 
<script type="text/javascript" src="./jquery.selectscroll.js"></script>

2. Create a container to place the picker input.

<div class="test" id="test"></div>

3. Define your data in an array of JS objects as follows:

        text: 'jQuery',
        id: 1
         text: 'Script',
         id: 2
        text: '.Net',
        id: 3
        text: 'CSS',
        id: 4
         text: 'Script',
         id: 5
        text: '.Com',
        id: 6

4. Initialize the picker with default settings.

  data: myData

5. Set the preselected items.

  selectedIndex: [0, 0]

6. Customize the title of the picker.

  title: 'Pick An Option'

7. Customize the confirm/cancel buttons.

  cancelTxt: 'cancel',
  cancelClass: '',
  confirmTxt: 'confirm',
  confirmClass: '',
  cancel: null, // callback
  confirm: null // callback

This awesome jQuery plugin is developed by lu607601. For more Advanced Usages, please check the demo page or visit the official website.