js mobileSelect.js基本用法支持移动，pc

这是一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等.
mobileSelect代码

简单粗暴:看演示

方式一 标签引入：

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

<script src="js/mobileSelect.js" type="text/javascript"></script>

方式二 npm：

npm install mobile-select -D

如何使用:

1.普通数组格式-非联动

<div id="day"></div><!--Don't forget this trigger in your page-->

<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#day',
    title: '单项选择',
    wheels: [
                {data:['周日','周一','周二','周三','周四','周五','周六']}
            ],
    position:[2] //Initialize positioning
});
</script>

2.json格式-非联动

<div id="area"></div>

<script type="text/javascript">
var mobileSelect2 = new MobileSelect({
    trigger: '#area',
    title: '地区选择',
    wheels: [
                {data:[
                    {id:'1',value:'附近'},
                    {id:'2',value:'上城区'},
                    {id:'3',value:'下城区'},
                    {id:'4',value:'江干区'},
                    {id:'5',value:'拱墅区'},
                    {id:'6',value:'西湖区'}
                ]},
                {data:[
                    {id:'1',value:'1000米'},
                    {id:'2',value:'2000米'},
                    {id:'3',value:'3000米'},
                    {id:'4',value:'5000米'},
                    {id:'5',value:'10000米'}
                ]}
            ],
    callback:function(indexArr, data){
        console.log(data); //Returns the selected json data
    }
});
</script>

3.json格式-联动

<div id="area2"></div>

<script type="text/javascript">
  var mobileSelect3 = new MobileSelect({
      trigger: '#area2',
      title: '地区选择-联动',
      wheels: [
                  {data:[
                      {
                          id:'1',
                          value:'附近',
                          childs:[
                              {id:'1',value:'1000米'},
                              {id:'2',value:'2000米'},
                              {id:'3',value:'3000米'},
                              {id:'4',value:'5000米'},
                              {id:'5',value:'10000米'}
                          ]
                      },
                      {id:'2',value:'上城区'},
                      {id:'3',value:'下城区'},
                      {id:'4',value:'江干区'},
                      {id:'5',value:'拱墅区'},
                      {id:'6',value:'西湖区'}
                  ]}
              ],
      position:[0,1],
      callback:function(indexArr, data){
          console.log(data); //Returns the selected json data
      }
  });
  </script>

异步填充数据

<!-- ************ Non-cascade Format ************ -->

<div id="trigger4"></div>

<script type="text/javascript">
    var mobileSelect4 = new MobileSelect({
        trigger: '#trigger4',
        title: 'ajax fill data - non-cascade',
        wheels: [
                    {data:[
                        {id:'1',value:'choose area'},
                    ]},
                    {data:[
                        {id:'1',value:'choose distance'},
                    ]}
                ],
        callback:function(indexArr, data){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //Assume that the obtained res.data.area is：
            // [
            //     {id:'1',value:'area1'},
            //     {id:'2',value:'area2'},
            //     {id:'3',value:'area3'},
            //     {id:'4',value:'area4'}
            // ]

            //Assume that the obtained res.data.distance is：
            // [
            //     {id:'1',value:'200 metres'},
            //     {id:'2',value:'300 metres'},
            //     {id:'3',value:'400 metres'}
            // ]

            mobileSelect4.updateWheel(0, res.data.area); //Update the 0th wheel
            mobileSelect4.updateWheel(1, res.data.distance); //Update the 1th wheel
        }
    });
</script>
</script>




<!-- ************ Cascade Format ************ -->

<div id="trigger4"></div>

<script type="text/javascript">
    var mobileSelect4 = new MobileSelect({
        trigger: '#trigger4',
        title: 'ajax fill data - cascade',
        wheels: [
                    {data:[
                        {
                            id:'1',
                            value:'',
                            childs:[
                                {id:'A1',value:''},
                            ]
                        }
                    ]}
                ],
        callback:function(indexArr, data){
            console.log(data);
        }
    });

    $.ajax({
        type: "POST",
        url: "xxxx",
        data: {},
        dataType: "json",
        success: function(res){
            //Assume that the obtained res.data is：
            // [{
            //     id:'1',
            //     value:'after update',
            //     childs:[
            //         {id:'A1',value:'apple'},
            //         {id:'A2',value:'banana'},
            //         {id:'A3',value:'orange'}
            //     ]
            // }]
            mobileSelect4.updateWheels(res.data);
        }
    });
</script>

如何在vue cli中使用

npm install mobile-select -D

<template>
    <div>
        <div id="trigger5">vue-cli-demo</div>
    </div>
</template>

<script>
    import MobileSelect from 'mobile-select'

    export default {
        mounted() {
            var mobileSelect5 = new MobileSelect({
                trigger: "#trigger5",
                title: "vue-cli-demo",
                wheels: [
                    {data: ["周日","周一","周二","周三","周四","周五","周六"]}
                ],
                callback:function(indexArr, data){
                    console.log(data);
                }
            });
        }
    }
</script>

JSON格式-数据字段映射

<div id="trigger6"></div>

<script type="text/javascript">
    // If your data field is named id, title, children
    // does not match the id, value, childs field name of mobileSelect
    // You can use the keyMap property for field name mapping
    var mobileSelect6 = new MobileSelect({
        trigger: '#trigger6',
        title: 'keyMap',
        wheels: [
                    {data:[
                        {
                            id:'1',
                            title:'A',
                            children:[
                                {id:'A1',title:'A-a'},
                                {id:'A2',title:'A-b'},
                                {id:'A3',title:'A-c'}
                            ]
                        },
                        {
                            id:'1',
                            title:'B',
                            children:[
                                {id:'B1',title:'B-a'},
                                {id:'B2',title:'B-b'},
                                {id:'B3',title:'B-c'}
                            ]
                        },
                    ]}
                ],
        keyMap: {
            id:'id',
            value: 'title',
            childs :'children'
        },
        callback:function(indexArr, data){
            console.log(data);
        }
    });
</script>