移动端仿ios滑动选择的插件：mobileScroll
参考网站：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 "选择家人关系"; },
cancelText: null,
});
/*展示选择框*/
$('.select-illness-next-copy').on('click',function () {
$('#relative').mobiscroll('show');
return false;
})
/*选择值发生改变*/
$('#relative').on('change', function() {
let balue = $('#relative_dummy').val();
let ddd = $('#relative').val();
console.log(balue);
console.log(ddd);
})
- 效果如图
展示框
