移動端仿ios滑動選擇的插件：mobileScroll
參考網(wǎng)站：https://www.mobiscroll.cn/index
- html
<div class="select-illness-next-copy">
下一步
</div>
<select name="City" id="relative">
<option value="1">父親</option>
<option value="2">母親</option>
<option value="3">爺爺</option>
<option value="4">奶奶</option>
<option value="5">外公</option>
<option value="6">外婆</option>
<option value="7">兄弟姐妹</option>
</select>
- js
/*初始化插件*/
var instance = mobiscroll.select('#relative', {
theme: 'ios',
lang: 'zh',
display: 'bottom',
minWidth: 200,
headerText: function (valueText) { return "選擇家人關(guān)系"; },
cancelText: null,
});
/*展示選擇框*/
$('.select-illness-next-copy').on('click',function () {
$('#relative').mobiscroll('show');
return false;
})
/*選擇值發(fā)生改變*/
$('#relative').on('change', function() {
let balue = $('#relative_dummy').val();
let ddd = $('#relative').val();
console.log(balue);
console.log(ddd);
})
- 效果如圖
展示框
