移动端的jQuery二级联动滑动选择插件mobile selector

一款移动端的jQuery二级联动滑动选择插件mobile selector，分单选、二级联动和非联动三种方式可供选择，弹出层是固定在页面底部的，所以比较适合移动端来使用，适用于表单有城市选择或自定义内容选项的页面场景，喜欢的童鞋请收下吧。

分类：表单代码 > 城市选择难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置好单选、二级联动和非联动三种方式的容器即可，代码如下：

<div class="slide-wapper">
  <div class="slide-item">
    <div class="console"></div>
    <div class="title2">二级模拟选择插件</div>
    <div class="title">二级城市联动选择</div>
    <input type="text" class="select-value" value="广东省">
    <div class="title">二级非联动选择</div>
    <div class="select-input2">
      <input type="text" class="select-value2" value="秘密 吸引力法则" >
    </div>
    <div class="title">单级选择</div>
    <input type="text" class="select-value3" value="">
    <br>
    <br>
    <!-- 二级非联动选择 --> 
    <!--  <input type="text" class="select-value4" value="饿的方式度过 收到额外人" readonly="true" mpicker='picker4'> -->
    <pre>
两级联动选择插件调用：
$('.select-value').mPicker({
    //级别
    level:2,
    //需要渲染的json，二级联动的需要嵌套子元素，有一定的json格式要求
    dataJson:dataJson,
    //true:联动
    Linkage:true,
    //显示行数
    rows:6,
    //默认值填充
    idDefault:true,
    //分割符号
    splitStr:'-',
    //头部代码
    header:'<\div class="mPicker-header">两级联动选择插件<\/div>',
    confirm:function(){
        //更新json
        this.container.data('mPicker').updateData(level3);
        //console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
    },
    cancel:function(){
        //console.info($('.select-value').data('value1')+'-'+$('.select-value').data('value2'));
    }
})
//返回的实例对象，
//包含showPicker,hide,updateData等方法
// var method= $('.select-value').data('mPicker');
// console.info(method)
// method.showPicker();
// method.hide(function(){
//     console.info(this)
// });
    </pre>
  </div>
</div>

页面的底部，需引入jQuery库和一个JS文件，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>