Jumping thru hoops to get the selected item in a tap event. Here is what i did to get the value of the selected item in scroller.
$('#questions').mobiscroll().select({
theme: 'wp',
accent: 'none',
display: 'modal',
tap : true,
// mode: 'mixed',
inputClass: 'i-txt',
setText : 'Select',
onSelect : function(valueText, inst){ selectedQuestion(valueText, inst); },
onValueTap : function(item, inst){ tappedQuestion(item, inst); },
width: 400
});
function selectedQuestion(valueText, inst){
console.log( $('#questions').val());
}
function tappedQuestion(obj, inst){
console.log( "Old Value: "+$('#questions').val() );
console.log( $(obj).val() ); // this is NULL
var x = $(obj).get(0).dataset.val; // have to dig down to get the val of the item
console.log( "Tapped val: "+x ); // now i got the value
$('#questions').val(x); // set the Select option to selected
var tt = $(obj).get(0).innerText; // now getting the text of the selected option
$('.ui-btn-text > span.f-dd').text(tt); // now setting the display text
$('#questions').mobiscroll('hide'); // hiding the scroller
console.log( "New Value of Select: "+$('#questions').val() ); // checking we are good
}
Here is the html.
<select name="questions" id="questions" data-theme="a" class="f-dd" >
<option value="0">Opt 0</option>
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
<option value="5">Opt 5</option>
</select>
Maybe there is a better way to do this?
