文档和demo可以访问 https://github.com/zhoushengmufc/iosselect/ 

使用 iosselect 需要下载iosSelect.css 和iosSelect.js 可以去文档demo的代码里找文件

先说通过jq实现，直接引入文件，注意引入路径

<link href="css/iosSelect.css" type="text/css" rel="stylesheet">    
<script src="js/iosSelect.js"></script>
<script src="//i2.wp.com/libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

html部分直接使用就可，一般都是通过input标签来触发，不过在H5里有时候会有安卓、ios兼容问题，所以这里实现通过点击p标签来触发选择事件。

<p class="text_inp p_select" name="shopType" id="shopType" onclick="showli()">请选择您的所属地区</p>
<img onclick="showli()" class="text_jtimg" src="img/jt_x.png" alt="">

<script>
function showli() {
  // 通俗理解 这里IosSelect的参数 1 就是一级下拉 后面数组和对象是选择的值
  new IosSelect(1, [[{ "id": "001", "value": "暂无" }]], {
    // 标题
    title: '请选择您的所属地区',
    // 选中的id
    oneLevelId: $("#shopType").attr('data-shopType-code'),
    // 选择完的回调，在这里干活
    callback: function (selectOneObj) {
    // 自定义从哪项开始，可以加个自定义属性：data-shopType-code="开始项的id"
    $("#shopType").attr('data-shopType-code', selectOneObj.id);
    $("#shopType").text(selectOneObj.value);
    $("#shopType").css('color', '#000');
   }
 });
}
</script>

实现效果：

点击后 --：

至此 jq方法实现结束。

vue 中使用iosselect插件

1. 安装 npm install iosselect

2.页面引入 iosselect 和 iosSelect.css 

（这里css文件直接在main.js中直接引入的）

// 哪个页面用哪个页面引
import IosSelect from "iosselect";

// css放在main.js里引
require('iosselect/src/iosSelect.css')

直接开始干活...

一样input可能会有安卓、ios 兼容问题所以也是用p标签来实现触发，

<template>
  <div class="about">
    <h1>iosselect下拉框</h1>
    <p @click="selectClick">{{activityLevel}}</p>
    <p @click="selectClick02">{{activityLevel}}、{{activityLevel02}}</p>
  </div>
</template>
<script>
import IosSelect from "iosselect";
export default {
  data() {
    return {
      activityLevel:'请点击选择',
      activityLevel02:'二级下拉选择'
    }
  },
  methods:{
    selectClick(){
      var that = this
      let sele_Level = [{ "id": "001", "value": "自助餐" }, { "id": "002", "value": "私房菜" }, { "id": "003", "value": "超市" }]
      new IosSelect(1, [sele_Level], {
        title: "请选择就餐模式",
        oneLevelId: '001',
        itemHeight: (document.documentElement.clientWidth / 750) * 100 * 0.75,
        showLoading: true,
        callback(
          selectOneObj,
        ) {
          that.activityLevel = `${selectOneObj.value}`;
        },
      });
    },
    selectClick02(){
      var that = this
      let sele_Level = [{ "id": "001", "value": "自助餐" }, { "id": "002", "value": "私房菜" }, { "id": "003", "value": "超市" }]
      let sele_Level02 = [{ "id": "001", "value": "海鲜" }, { "id": "002", "value": "面条" }, { "id": "003", "value": "超市" }]
      new IosSelect(2, [sele_Level,sele_Level02], {
        title: "请选择就餐模式",
        oneLevelId: '001',
        twoLevelId:'002',
        itemHeight: (document.documentElement.clientWidth / 750) * 100 * 0.75,
        showLoading: true,
        callback(
          selectOneObj,selectTwoObj
        ) {
          that.activityLevel = `${selectOneObj.value}`;
          that.activityLevel02 = `${selectTwoObj.value}`;
        },
      });
    }
  }
}
</script>

实现效果：

--- 结束。