iosSelect插件 H5中实现iOS的select下拉联动效果

简要说明

官网：http://zhoushengfe.com/iosselect/website/index.html
下载：在官网点击 github 菜单项就可以下载此插件。

下载好后可以看到两个文件夹，将src下的两个文件放到工程里的对应位置引入之后就可以按照说明进行使用了，这个插件更适用于移动端。
还有一个demo文件夹，里面是一些下拉联动效果的实例，可以参考它们使用来实现想要的功能。

因为我个人认为demo实例中的代码有些啰嗦，所以只提取了需要的部分，将一些实例部分重写了下，请往下看。

先引入几个文件：

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

一个最基本的实例：

<label>商铺类型：<input type="text" name="shopType" id="shopType" placeholder="请选择商铺类型" /></label>

var shopTypeList = [{ "id": "10000", "value": "自助餐" }, { "id": "10001", "value": "私房菜" }, { "id": "10002", "value": "超市" }];

$("#shopType").on("focus",function(){
    new IosSelect(1, [shopTypeList], {
        callback: function (selectOneObj) {
            $("#shopType").val(selectOneObj.value);
        }
    });
});

参数说明：

通过new IosSelect({});来调用这个插件，一共有三个参数：

level （Number类型，数据的层级，最多支持6层）
data （Array类型，要显示的数据，可以有多个(几个代表有几列)；每个对象必须有id、value[、parentId]，做关联的时候(如省市区)要用到parentId）
options （Object类型，包含其余选项，含以下几个属性(加*的为必选项)）
- *callback ：选择完毕后的回调函数
- container：实例化后的对象包裹元素
- title：标题
- itemHeight：每一项的高度
- itemShowCount ：组件展示的项数，可选3,5,7,9，不是3,5,7,9则展示7项
- headerHeight：组件标题栏高度
- cssUnit： css尺寸单位，可选px或者rem
- addClassName：组件额外类名，用于自定义样式
- relation：各级选项之间是否通过parentId关联，如：[1, 1] (一共3级都关联) / [1, 1, 1, 0,] (一共5级(列)，1234关联，5不关联)，默认都不关联[0, 0, 0, 0, 0]；注意：关联的数据要加parentId属性
- oneLevelId（twoLevelId / threeLevelId / fourLevelId / fiveLevelId / sixLevelId）：实例展示时，第n级数据默认选中值，默认为第n级数据第一项id
- showLoading：实例展示时，在数据显示之前下拉菜单是否显示加载中的效果，建议ajax获取数据时设置为true，默认false

Demos

可通过自定义属性结合参数options属性 oneLevelId（twoLevelId / …）实现从指定数据开始显示和从上一次选择的数据开始显示功能。

一级级联：

<label>商铺类型：<input type="text" name="shopType" id="shopType" placeholder="请选择商铺类型" /></label>
<!-- **这里第一次弹出时是从第一项开始显示，若想第一次就从指定项开始显示 可以加个自定义属性：data-shopType-code="10001" -->

$("#shopType").on("focus",function(){
    new IosSelect(1, [[{ "id": "10000", "value": "自助餐" }, { "id": "10001", "value": "私房菜" }, { "id": "10002", "value": "超市" }]], {
        title: '选择商铺类型',
        oneLevelId: $("#shopType").attr('data-shopType-code'),
        callback: function (selectOneObj) {
            $("#shopType").attr('data-shopType-code', selectOneObj.id);
            $("#shopType").val(selectOneObj.value);
        }
    });
});

二级级联：

<label>请选择将领：<input type="text" name="leader" id="leader" placeholder="请选择将领" /></label>

var suData = [{'id': '10001', 'value': '刘备'}, {'id': '10002', 'value': '关羽'}, {'id': '10003', 'value': '张飞'}, {'id': '10004', 'value': '诸葛亮'}, {'id': '10005', 'value': '赵云'}];
var weiData = [{'id': '20001', 'value': '曹操'}, {'id': '20002', 'value': '曹冲'}, {'id': '20003', 'value': '曹丕'}, {'id': '20004', 'value': '曹植'}, {'id': '20006', 'value': '曹仁'}];
$("#leader").on("click",function(){
    new IosSelect(2,
            [suData, weiData],
            {
                title: '将领选择',
                oneLevelId: $("#leader").attr('data-su-id'),
                twoLevelId: $("#leader").attr('data-wei-id'),
                callback: function (selectOneObj, selectTwoObj) {
                    $("#leader").attr('data-su-id', selectOneObj.id);
                    $("#leader").attr('data-wei-id', selectTwoObj.id);
                    $("#leader").val('蜀国将领是：' + selectOneObj.value + ' 魏国将领是：' + selectTwoObj.value);
                }
            });
});

三级级联：

省市区通过parentId关联

<label>省市区类型：<input type="text" name="address" id="address" data-province-code="120000" data-city-code="120100" data-district-code="120102" placeholder="请选择省市区" /></label>

var proCityArea = {
    "provinces": [{ "id": "110000", "value": "北京市",  "parentId": "0" }, { "id": "120000", "value": "河北省", "parentId": "0" }],
    "cities": [{ "id": "110100", "value": "北京市", "parentId": "110000" },{ "id": "0", "value": "县", "parentId": "-1" }, { "id": "120100", "value": "廊坊市", "parentId": "120000" },{ "id": "120200", "value": "石家庄市", "parentId": "120000" }],
    "Areas": [{ "id": "110101", "value": "东城区", "parentId": "110100" }, { "id": "110102", "value": "西城区", "parentId": "110100" }, { "id": "120101", "value": "广阳区", "parentId": "120100" }, { "id": "120102", "value": "固安县", "parentId": "120100" }, { "id": "120201", "value": "桥东区", "parentId": "120200" }]
};
$("#address").on("focus",function(){
    new IosSelect(3, [proCityArea.provinces, proCityArea.cities, proCityArea.Areas], {
        title: '选择省市区',
        relation: [1,1],
        oneLevelId: $("#address").attr('data-province-code'),
        twoLevelId: $("#address").attr('data-city-code'),
        threeLevelId: $("#address").attr('data-district-code'),
        callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
//                    data-province-code="120000" data-city-code="120100" data-district-code="120102"
            $("#address").attr('data-province-code', selectOneObj.id);
            $("#address").attr('data-city-code', selectTwoObj.id);
            $("#address").attr('data-district-code', selectThreeObj.id);
            $("#address").val(selectOneObj.value + '-' + selectTwoObj.value + '-' + selectThreeObj.value);
        }
    });
});

六级级联：

传入（多个）方法，在方法中获取数据

<label>选择日期：<input type="text" name="dataTime" id="dataTime" placeholder="请选择日期" /></label>

var $dataTime = $('#dataTime');
// 初始化时间数据（点击默认显示当前日期，年份数据是当前年份的前后五年）
var dateTime = (function(){var now=new Date();var nowYear=now.getFullYear();var nowMonth=now.getMonth()+1;var nowDate=now.getDate();$dataTime.attr("data-year",nowYear);$dataTime.attr("data-month",nowMonth);$dataTime.attr("data-date",nowDate);function formatYear(nowYear){var arr=[];for(var i=nowYear-5;i<=nowYear+5;i++){arr.push({id:i+"",value:i+"年"})}return arr}function formatMonth(){var arr=[];for(var i=1;i<=12;i++){arr.push({id:i+"",value:i+"月"})}return arr}function formatDate(count){var arr=[];for(var i=1;i<=count;i++){arr.push({id:i+"",value:i+"日"})}return arr}var yearData=function(callback){callback(formatYear(nowYear))};var monthData=function(year,callback){callback(formatMonth())};var dateData=function(year,month,callback){if(/^(1|3|5|7|8|10|12)$/.test(month)){callback(formatDate(31))}else{if(/^(4|6|9|11)$/.test(month)){callback(formatDate(30))}else{if(/^2$/.test(month)){if(year%4===0&&year%100!==0||year%400===0){callback(formatDate(29))}else{callback(formatDate(28))}}else{throw new Error("month is illegal")}}}};var hourData=function(one,two,three,callback){var hours=[];for(var i=0,len=24;i<len;i++){hours.push({id:i,value:i+"时"})}callback(hours)};var minuteData=function(one,two,three,four,callback){var minutes=[];for(var i=0,len=60;i<len;i++){minutes.push({id:i,value:i+"分"})}callback(minutes)};var secondsData=function(one,two,three,four,five,callback){var seconds=[];for(var i=0,len=60;i<len;i++){seconds.push({id:i,value:i+"秒"})}callback(seconds)};return[yearData,monthData,dateData,hourData,minuteData,secondsData]})();

$dataTime.on("focus",function(){
    new IosSelect(6, dateTime, {
        title: '时间选择',
        itemShowCount: 9,
        oneLevelId: $dataTime.attr('data-year'),
        twoLevelId: $dataTime.attr('data-month'),
        threeLevelId: $dataTime.attr('data-date'),
        fourLevelId: $dataTime.attr('data-hour'),
        fiveLevelId: $dataTime.attr('data-minute'),
        sixLevelId: $dataTime.attr('data-second'),
        callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj, selectSixObj) {
            $dataTime.attr('data-year', selectOneObj.id);
            $dataTime.attr('data-month', selectTwoObj.id);
            $dataTime.attr('data-date', selectThreeObj.id);
            $dataTime.attr('data-hour', selectFourObj.id);
            $dataTime.attr('data-minute', selectFiveObj.id);
            $dataTime.attr('data-second', selectSixObj.id);
            $dataTime.val(selectOneObj.value + selectTwoObj.value + selectThreeObj.value + ' ' + selectFourObj.value + ':' + selectFiveObj.value + ':' + selectSixObj.value);
        }
    });
});

还可以ajax获取数据，显示加载中效果。具体代码看下载文件夹中的 demo/ajax 目录下实例。

自定义样式：

默认样式：
这里写图片描述

可通过：options.addClassName（如：addClassName: ‘iosSelectStyle’）属性来添加自定义css类名。之后就可以自定义样式了，如：

.ios-select-widget-box.olay.iosSelectStyle { background: rgba(0, 0, 0, 0.5) }
.iosSelectStyle header.iosselect-header a.close,
.iosSelectStyle header.iosselect-header a.sure { color: #0c9 }
.iosSelectStyle ul li.at { color: #0c9 }

这里写图片描述