基于mobiscroll.custom.js做下拉选择框

移动端仿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);
})

• 效果如图

展示框