mobiscroll

官网：https://www.mobiscroll.com/
文档：https://docs.mobiscroll.com/

城市选择

引入css

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

引入js

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(''));
    }
});

时间选择

引入css

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

引入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.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>

html

<input name="test" id="txttest" class="demo-test-date demo-test-datetime demo-test-time demo-test-credit" />

js

$("#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);
        }
    });