H5利用iosselect实现一级、二级下拉，利用jq大概vue

文档和demo可以访问 https://github.com/zhoushengmufc/iosselect/ 
利用 iosselect 需要下载iosSelect.css 和iosSelect.js 绑定资源里有可以直接拿大概也可以去文档demo的代码里找文件
先说通过jq实现，直接引入文件，注意引入路径

2. <link href="css/iosSelect.css" type="text/css" rel="stylesheet">   
3. <script src="js/iosSelect.js"></script>
4. <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

复制代码

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

1. <p class="text_inp p_select" name="shopType" id="shopType" onclick="showli()">请选择您的所属地区</p>
2. <img onclick="showli()" class="text_jtimg" src="img/jt_x.png" alt="">
4. <script>
5. function showli() {
6.   // 通俗理解 这里IosSelect的参数 1 就是一级下拉 后面数组和对象是选择的值
7.   new IosSelect(1, [[{ "id": "001", "value": "暂无" }]], {
8.     // 标题
9.     title: '请选择您的所属地区',
10.     // 选中的id
11.     oneLevelId: $("#shopType").attr('data-shopType-code'),
12.     // 选择完的回调，在这里干活
13.     callback: function (selectOneObj) {
14.     // 自定义从哪项开始，可以加个自定义属性：data-shopType-code="开始项的id"
15.     $("#shopType").attr('data-shopType-code', selectOneObj.id);
16.     $("#shopType").text(selectOneObj.value);
17.     $("#shopType").css('color', '#000');
18.    }
19. });
20. }
21. </script>

复制代码

实现结果：

点击后 --：

至此 jq方法实现结束。
vue 中利用iosselect插件
1. 安装 npm install iosselect
2.页面引入 iosselect 和 iosSelect.css 
（这里css文件直接在main.js中直接引入的）

1. // 哪个页面用哪个页面引
2. import IosSelect from "iosselect";
4. // css放在main.js里引
5. require('iosselect/src/iosSelect.css')

复制代码

直接开始干活...
一样input大概会有安卓、ios 兼容问题以是也是用p标签来实现触发，

1. <template>
2.   <div class="about">
3.     <h1>iosselect下拉框</h1>
4.     <p @click="selectClick">{{activityLevel}}</p>
5.     <p @click="selectClick02">{{activityLevel}}、{{activityLevel02}}</p>
6.   </div>
7. </template>
8. <script>
9. import IosSelect from "iosselect";
10. export default {
11.   data() {
12.     return {
13.       activityLevel:'请点击选择',
14.       activityLevel02:'二级下拉选择'
15.     }
16.   },
17.   methods:{
18.     selectClick(){
19.       var that = this
20.       let sele_Level = [{ "id": "001", "value": "自助餐" }, { "id": "002", "value": "私房菜" }, { "id": "003", "value": "超市" }]
21.       new IosSelect(1, [sele_Level], {
22.         title: "请选择就餐模式",
23.         oneLevelId: '001',
24.         itemHeight: (document.documentElement.clientWidth / 750) * 100 * 0.75,
25.         showLoading: true,
26.         callback(
27.           selectOneObj,
28.         ) {
29.           that.activityLevel = `${selectOneObj.value}`;
30.         },
31.       });
32.     },
33.     selectClick02(){
34.       var that = this
35.       let sele_Level = [{ "id": "001", "value": "自助餐" }, { "id": "002", "value": "私房菜" }, { "id": "003", "value": "超市" }]
36.       let sele_Level02 = [{ "id": "001", "value": "海鲜" }, { "id": "002", "value": "面条" }, { "id": "003", "value": "超市" }]
37.       new IosSelect(2, [sele_Level,sele_Level02], {
38.         title: "请选择就餐模式",
39.         oneLevelId: '001',
40.         twoLevelId:'002',
41.         itemHeight: (document.documentElement.clientWidth / 750) * 100 * 0.75,
42.         showLoading: true,
43.         callback(
44.           selectOneObj,selectTwoObj
45.         ) {
46.           that.activityLevel = `${selectOneObj.value}`;
47.           that.activityLevel02 = `${selectTwoObj.value}`;
48.         },
49.       });
50.     }
51.   }
52. }
53. </script>

复制代码

实现结果：

 
--- 结束。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。