Mobiscroll控件动态绑定数据

用Mobiscroll 可实现IOS系统自带的选择器控件效果，支持几乎所有的移动平台(IOS, Android, BlackBerry, Windows Phone 8, Amazon Kindle)，当然在PC的浏览器上跑，效果也还不错。

Mobiscroll控件动态绑定数据

这里以一个动态绑定城市选择框为实例。注意本实例使用了ASP.NET MVC。

页面代码：

@{
    Layout = null;
    ViewBag.Title = "Mobiscroll控件动态绑定数据";
}

<!--添加mobiscroll样式引用-->
<link href="~/Content/css/mobiscroll.custom-2.15.1.min.css" rel="stylesheet" />

<span>城市：</span>
<select id="selCity" onchange="ChangeCity()"></select>
<p id="spCity"></p>

<!--添加mobiscroll相关脚本引用-->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/mobiscroll.custom-2.15.1.min.js"></script>

<script>
    $(document).ready(function () {
        var data = GetCityList();     //获取城市列表

        var arrDept = new Array();   //绑定的数据
        for (var i = 0; i < data.length; i++) {
            var Dept = new Object();
            Dept.value = data[i];
            Dept.text = data[i],
            arrDept.push(Dept);
        }

        $('#selCity').mobiscroll().select({
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'bottom',
            minWidth: 200,
            data: arrDept
        });

    });

    //获取城市列表
    function GetCityList()
    {
        var result = null;
        $.ajax({
            type: "post",
            url: '@Url.Action("GetCityList", "Home")',
            cache: false,
            async: false,
            success: function (data) {
                result = data;
            }
        });
        return result;
    }

    function ChangeCity() {
        var city = $('#selCity').mobiscroll('getVal');
        $("#spCity").html("您选择的城市：" + city);
    }
</script>

控制器代码：

/// <summary>
/// 获取城市列表
/// </summary>
/// <returns></returns>
public JsonResult GetCityList()
{
    List<string> cityList = new List<string>();
    cityList.Add("北京");
    cityList.Add("上海");
    cityList.Add("深圳");
    cityList.Add("广州");
    return Json(cityList);
}

Mobiscroll官方网站：https://www.mobiscroll.com/