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:

• ios Style Data picker With jQuery - ios.picker.js
• ios Style jQuery 3D Animated Value Selector - Drumjs
• iOS Style Picker View In Vanilla JavaScript – mobileSelect.js

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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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.

$('#test').selectScroll({
  data: myData
})

5. Set the preselected items.

$('#test').selectScroll({
  selectedIndex: [0, 0]
})

6. Customize the title of the picker.

$('#test').selectScroll({
  title: 'Pick An Option'
})

7. Customize the confirm/cancel buttons.

$('#test').selectScroll({
  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.