フープを介してジャンプして、タップ イベントで選択されたアイテムを取得します。スクローラーで選択したアイテムの値を取得するために私がしたことは次のとおりです。
$('#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
}
ここに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>
多分これを行うためのより良い方法がありますか?