JSFiddle - React, Tailwind, and code Playground

by Marcus Granström

HTML

<link rel="stylesheet" href="http://demo.mobiscroll.com/Content/css/mobiscroll-2.0.2.full.min.css">
<script src="http://demo.mobiscroll.com/Content/js/mobiscroll-2.0.2.full.min.js"></script>
<table>
 <tr>
 <td>Input 1 <input ID="i" /></td>
 <td>Input 2 <input ID="i2" /></td>
 </tr>
</table>

JavaScript

$(function(){
    //note: keys are the 1/2 and values are the 1-3/3-4
    //in this example we're using the header text to display the values instead of the keys
   $('#i').scroller({
       wheels : [{
           '' : {
             '1' : '1 - 3',
             '2' : '3 - 4'
           }
       }],
       width : 160,
       theme: 'ios',
       display: 'inline',
       mode: 'scroller',
       //mode : 'clickpick',
      // theme: 'default',
       headerText: function(value){
           if (value == '1'){
               return '1 - 3';
           } else if (value == '2'){
               return '3 - 4';
           }
       }
   });  
    
    //this example demonstrates the usage of the onSelect and the parseValue
    $('#i2').scroller({
        wheels : [{
            '' : {
              '1 - 3' : '1 - 3',
              '3 - 4' : '3 - 4'
            }
        }],
        width : 160,
       theme: 'ios',
       display: 'inline',
       mode: 'scroller',
       //mode : 'clickpick',
      // theme: 'default',
        onSelect: function(valueText,inst){
            //the onSelect event takes care of setting the inputs value (you could use a variable for this)
            if (valueText == '1 - 3'){
                $('#i2').val('1');
            } else if (valueText == '3 - 4'){
                $('#i2').val('2');
            }
        },
        parseValue: function(valueText){
            //we need to use the parseValue function in order to parse the 1/2 to the right element
            if (valueText == '1'){
                //if value from input = 1 return the first element
                return ['1 - 3']; //note: we need to retrun an array, where each element is corresponding to a wheel
            } else if (valueText == '2'){
                //return the second element
                return ['3 - 4'];
            } else {
                //need a default if the input is blank
                return ['1 - 3'];
            }
        }
        
   });    
});