官网:https://www.mobiscroll.com/
文档:https://docs.mobiscroll.com/
<link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/mobiscroll.scroller.android-ics.css"/>
<link rel="stylesheet" href="css/mobiscroll.animation.css"/>
selarea.js为城市数组存储的js文件
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="js/mobiscroll.core.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.js" type="text/javascript"></script>
<script src="js/mobiscroll.list.js" type="text/javascript"></script>
<script src="js/mobiscroll.select.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script>
<script src="js/mobiscroll.i18n.zh.js" type="text/javascript"></script>
<script src="../selarea/js/selarea.js" type="text/javascript"></script>
html格式
<div class="demo-wrapper demo-treelist">
<ul id="cityList" style="display:none">
<li data-val="Eastern Division">East
<ul>
<li data-val="Eden E">Eden E</li>
<li data-val="Milda J">Milda J</li>
<li data-val="Porfirio R">Porfirio R</li>
<li data-val="Frances P">Frances P</li>
<li data-val="Frank D">Frank D</li>
<li data-val="Gianny P">Gianny P</li>
<li data-val="Ivan F">Ivan F</li>
<li data-val="John M">John M</li>
<li data-val="Mildred S">Mildred S</li>
<li data-val="Sam P">Sam P</li>
</ul>
</li>
<li data-val="Western Division">West
<ul>
<li data-val="Cliff B">Cliff B</li>
<li data-val="Helen D">Helen D</li>
<li data-val="Stephan V">Stephan V</li>
<li data-val="Andy G">Andy G</li>
<li data-val="Danny A">Danny A</li>
<li data-val="Ennio M">Ennio M</li>
<li data-val="Emil E">Emil E</li>
<li data-val="Frank S">Frank S</li>
<li data-val="Gonzo G">Gonzo G</li>
<li data-val="Hal A">Hal A</li>
<li data-val="Jack G">Jack G</li>
<li data-val="John A">John A</li>
<li data-val="Simon D">Simon D</li>
<li data-val="Victor S">Victor S</li>
</ul>
</li>
</ul>
</div>
<button id="show72">show</button>
js代码
$('#show72').click(function () {
$('#cityList').mobiscroll('show');
return false;
});
$('#cityList').mobiscroll().treelist({
theme: 'ios',
lang: 'zh',
display: 'bottom',
width: [266, 116],
placeholder: 'Please Select ...',
labels: ['省份', '城市'],
headerText: function (valueText) { //自定义弹出框头部格式
return "选择城市";
},
onSelect: function (valueText, inst) {
console.log(valueText);
}
});
如果使用城市数组.js,使用所有的城市,可以循环数组,将数据组织成#cityList 里相同的格式,然后放入其中即可。
selarea.js 中可以通过objZhArea获得城市数组,area0是省份,area1是城市,area2是地区
$(function(){
var shtml = [];
for (var p in objZhArea.area0) {
shtml.push('<li data-val="' + objZhArea.area0[p] + '">' + objZhArea.area0[p]);
shtml.push("<ul>");
for(var c in objZhArea.area1[p]){
var sign = objZhArea.area1[p][c][1];
shtml.push('<li data-val="' + objZhArea.area1[p][c][0] + '">' + objZhArea.area1[p][c][0]);
//如果是三级城市选择可以加上该部分代码
// shtml.push("<ul>");
//
//for(var d in objZhArea.area2[sign]){
//shtml.push('<li data-val="' + objZhArea.area2[sign][d][1] + '">' + objZhArea.area2[sign][d][0] + '</li>');
//}
shtml.push('</li>');
}
shtml.push("</ul></li>");
$('#cityList').html(shtml.join(''));
}
});
<link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.android.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.android-ics.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.scroller.wp.css" rel="stylesheet" type="text/css" />
<link href="css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="js/mobiscroll.core.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.js" type="text/javascript"></script>
<script src="js/mobiscroll.datetime.js" type="text/javascript"></script>
<script src="js/mobiscroll.select.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.ios.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.android-ics.js" type="text/javascript"></script>
<script src="js/mobiscroll.scroller.wp.js" type="text/javascript"></script>
<script src="js/mobiscroll.i18n.zh.js" type="text/javascript"></script>
<input name="test" id="txttest" class="demo-test-date demo-test-datetime demo-test-time demo-test-credit" />
$("#txttest").mobiscroll().date({
theme: "android-ics",
lang: "zh",
display: 'bottom',
dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
headerText: function (valueText) { //自定义弹出框头部格式
array = valueText.split('-');
return array[0] + "年" + array[1] + "月" + array[2] + "日";
},
onSelect: function (valueText, inst) {
$("#txttest").val(valueText);
}
});