移动端mobileSelect控件

引用： <link href="css/mobileSelect.css" rel="stylesheet" />和<script src="js/mobileSelect.js"></script>

html

<dl>
         <dd class="MyFun">名称</dd>
         <dd class="leftFun card" id="dsgName"><input type="text"readonly placeholder="去设置" /></dd>
</dl>

<dl>
         <dd class="MyFun">值班时段</dd>
         <dd class="leftFun card" id="dsgDot"><input type="text"readonly placeholder="去设置" /></dd>
</dl>

jq

固定数值

  var starTime = ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30', '24:00'];
        var endTime = ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30', '24:00'];

var mobileSelect = new MobileSelect({
            trigger: '#dsgDot',
            title: '值班时段',
            wheels: [
                        { data: starTime },
                         { data: endTime },
            ],

      callback: function (indexArr, data) {
                    //选中完成执行的方法
          }
            position: [0, 1], //定位
});

C#

JavaScriptSerializer jss = new JavaScriptSerializer();
    HttpContext context = null;
    string sResult = "";

  public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        this.context = context;
        string type = context.Request.Form["itype"];

        switch (type)
        {
            case "Table":
                sResult = Table();
                break;
        }
        context.Response.Write(sResult);
    }

  private string Table()
    {
        //查询所有的list
        List<Model.Super.Table> zw = TableDAL.m_TableDal.GetList(" 1=1");
        return jss.Serialize(zw);
    }

AJAX 

 $.post("url", { "itype": "data" }, function (data) {
            var d = JSON.parse(data);
            var dotPosition = [];
            for (var i = 0; i < d.length; i++) {
                dotPosition[i] = d[i].name;
            }
            var mobileSelect3 = new MobileSelect({
                trigger: '#dsgName',
                title: '名称',
                wheels: [
                            { data: dotPosition}
                ],
                callback: function (indexArr, data) {
                   var  dotPositionIndex = indexArr[0];
                }
            });
        });

注意：如需和后端数据交互，需要标准的json的数据格式 其格式为

[{
        "id": 1,
        "value": "value1"
    },
    {
        "id": 2,
        "value": "value2"
    },
    {
        "id": 3,
        "value": "value3"
    }
     ************************
]