用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/