Select 下拉菜单

原生方法

本框架对原生的select元素做了尽可能的美化处理，不加任何js依然表现出色。本框架对表单元素默认设置为宽100%，用户根据需要设置宽度。

选择城市：

                                <select>
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break"></div>
                                <select style="width:120px;">
                                    <option value="北京">北京</option>
                                    <option value="上海">上海</option>
                                    <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break"></div>
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

不同尺寸

本框架的select默认高度是38px，可使用的尺寸有ax-xs(18px)，ax-sm(28px)和ax-lg(48px)。

Select2.JS方法

原生的下拉菜单不美观，而且在不同浏览器下有不同显示结果，为了保持风格统一改进体验，本框架在select2.js基础上进一步美化了select元素，并将该插件与本框架进行了深度融合，目前所使用的版本是v4.0.13。在引入jquery和ax.js之后，给select使用ax-select类即可。原始插件详见官网或Github。本框架主要改进内容如下：

简化css写法。
默认对所有使用ax-select类的下拉控件使用该插件。

选择城市：

姓名：

                                                <select class="ax-select">
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>

选项分组

对option使用optgroup包裹即可。

选择城市：

                                               <select class="ax-select">
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                    <optgroup label="广东省">
                                                        <option value="深圳">深圳</option>
                                                        <option value="广州">广州</option>
                                                        <option value="珠海">珠海</option>
                                                        <option value="惠州">惠州</option>
                                                    </optgroup>
                                                    <optgroup label="湖南省">
                                                        <option value="长沙">长沙</option>
                                                        <option value="株洲">株洲</option>
                                                        <option value="岳阳">岳阳</option>
                                                        <option value="张家界">张家界</option>
                                                    </optgroup>
                                                    <optgroup label="江西省">
                                                        <option value="南昌">南昌</option>
                                                        <option value="赣州">赣州</option>
                                                        <option value="宜春">宜春</option>
                                                        <option value="九江">九江</option>
                                                    </optgroup>
                                               </select>

不可选

对select或者option使用disabled属性即可实现禁止下拉和禁止选项。

选择城市：

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select" disabled>
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select">
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆" disabled>重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

多选

对select使用multiple属性即可。你可以设定多选的数量，以及是否显示清除按钮。

选择城市：

<script type='text/javascript'>
$("#select-multiple").select2({maximumSelectionLength:10,allowClear:true,});
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select" id="select-multiple" multiple data-placeholder="请选择...">
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                    <optgroup label="广东省">
                                                        <option value="深圳">深圳</option>
                                                        <option value="广州">广州</option>
                                                        <option value="珠海">珠海</option>
                                                        <option value="惠州">惠州</option>
                                                    </optgroup>
                                                    <optgroup label="湖南省">
                                                        <option value="长沙">长沙</option>
                                                        <option value="株洲">株洲</option>
                                                        <option value="岳阳">岳阳</option>
                                                        <option value="张家界">张家界</option>
                                                    </optgroup>
                                                    <optgroup label="江西省">
                                                        <option value="南昌">南昌</option>
                                                        <option value="赣州">赣州</option>
                                                        <option value="宜春">宜春</option>
                                                        <option value="九江">九江</option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

使用搜索

使用minimumResultsForSearch和placeholder属性即可。注意如果是多选情况下不能使用搜索功能。

选择城市：

<script type='text/javascript'>
$("#select-search").select2({minimumResultsForSearch:0,allowClear:true,placeholder: '请选择...',});
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select" id="select-search">
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆" selected>重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

默认选择

对option使用selected属性即可。

选择城市：

                               <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select">
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆" selected>重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                               </div>

回调函数

因为本框架美化select并没有改变select的html结构，所以其回调函数跟常规select回调函数一样。以下是回调函数举例：

选择城市：

<script type='text/javascript'>
$('#select-fun').change(function(e, v) {
            $('#select-result').html('你选择了第' + e.target.selectedIndex + '项，值是' + e.target.value);
});
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select" id="select-fun">
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                            <div class="ax-valid ax-color-primary" class="ax-select" id="select-result"></div>
                                        </div>
                                    </div>
                                </div>

操作

本框架下拉菜单支持通过按钮展开和关闭。以下是点击展开举例：

选择城市：

修改增加

<script type='text/javascript'>
  $('#select-change').on('click', function() {
            $("#select-operate").val('重庆').trigger('change');
        });
        $('#select-add').on('click', function() {
            $("#select-operate").prepend('').trigger('change');
        });
</script>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">选择城市：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select">
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-form-btn ax-btn ax-primary" class="ax-select" id="select-change">修改</a><a href="###" class="ax-form-btn ax-btn ax-primary" class="ax-select" id="select-add">增加</a>
                                    </div>
                                </div>

不同尺寸

本框架对select2下拉菜单支持四种尺寸，分别是ax-xs(高22px)、ax-sm(高28px)、ax-md(高38px)和ax-lg(高48px)。

ax.js中已经对尺寸做了判断，直接给select追加ax-select ax-sm类便可使用插件定义尺寸，当然用户也可自定义更多写法。

自定义变更尺寸的步骤有二，第一步是给使用dropdownCssClass参数；第二步是给ax-select追加尺寸类；如果是ax-form-group组合菜单，请同时给组合菜单追加尺寸类。

特小尺寸：

小型尺寸：

中型型尺寸：

大型尺寸：

<script type='text/javascript'>
    $("#select-size01").select2({dropdownCssClass:'ax-xs',minimumResultsForSearch:0,allowClear:true,placeholder: '请选择...',});
    $("#select-size02").select2({dropdownCssClass:'ax-sm',minimumResultsForSearch:0,allowClear:true,placeholder: '请选择...',});
    $("#select-size03").select2({minimumResultsForSearch:0,allowClear:true,placeholder: '请选择...',});
    $("#select-size04").select2({dropdownCssClass:'ax-lg',minimumResultsForSearch:0,allowClear:true,placeholder: '请选择...',});
</script>

                                <div class="ax-form-group ax-xs">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">特小尺寸：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select ax-xs" id="select-size01">
                                                    <option value="ax-xs">ax-xs(18px)</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-form-group ax-sm">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">小型尺寸：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select ax-sm" id="select-size02" multiple>
                                                    <option value="ax-sm">ax-sm(28px)</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">中型型尺寸：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select" id="select-size03" >
                                                    <option value="ax-sm">ax-md(38px)</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-form-group ax-lg">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">大型尺寸：</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input">
                                                <select class="ax-select ax-lg" id="select-size04" >
                                                    <option value="ax-lg">ax-lg(48px)</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

MobiScroll 下拉菜单

MobiScroll是目前发现比较好用的日期选择插件，官方有诸多个依赖版本，本框架使用的版本是v4.3.2jqury版本。本框架除了定义了一套皮肤没有修改其任何文件，大家可放心试用。因为该插件是商业版，尊重开发者的劳动成果非付费请尽量不商用。官方地址在这里。

MobiScroll插件自带下拉菜单，如果页面引用了该插件，可以根据该插件的参数使用下拉菜单，详细参数见API。

使用插件前请先引用相应的css和js：

                            <link href="src/plugins/mobiscroll/css/mobiscroll.jquery.css" rel="stylesheet" type="text/css" >
                            <script src="src/plugins/mobiscroll/js/mobiscroll.jquery.min.js" type="text/javascript"></script>

请参见演示效果：

单选：

打开

多选：

分组：

AJAX数据：

自动完成：

大段文字：

添加按钮：

所在位置：

省

市

县/区

        $('#select01').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onInit:function(event, inst){
                $('#'+this.id+'_dummy').after('');
            },
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'bubble',
            touchUi: false,
            showLabel:false,
        });

        $('#select02').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'bubble',
            rows:5,
            select:'multiple',
            label: '城市',
        });

        $('#select03').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'bubble',
            rows:5,
            groupLabel:'省份',
            label: '城市',
            group: true,
        });




        $('#select04').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            touchUi: false,
            placeholder: '选择城市...',
            data: {
                url: 'examples/zip.json',
                dataType: 'json'
            },
            label: '城市邮编',
            minWidth:300,
            cssClass:'mbsc-left-center',//item左排列
        });

        $('#select05').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            touchUi: false,
            placeholder: '选择城市...',
            data: {
                url: 'examples/zip.json',
                dataType: 'json'
            },
            filter: true,
            filterEmptyText:'没有任何结果',
            filterPlaceholderText:'关键字...',
            label: '城市邮编',
            minWidth:300,
            cssClass:'mbsc-left-center',//item左排列
        });


        $('#select06').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'bubble',
            rows:5,
            label: '中国朝代',
            multiline: 3,
            touchUi: false,
            maxWidth: 350
        });
        $('#select07').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'center',
            rows:5,
            select:'multiple',
            label: '城市',
            buttons: ['cancel',
                {text: '链接', handler: function (event, inst) {alert('点击了按钮！');}},
            'set'],
        });




        var reg,
            div,
            sub,
            emptyValue = { value: '', text: '', disabled: true },
            regions = [
                { value: 1, text: '广东' },
                { value: 2, text: '广西' },
                { value: 3, text: '湖北' },
            ],
            divisions = {
                1: [
                    { value: 1, text: '深圳' },
                    { value: 2, text: '广州' },
                    { value: 3, text: '佛山' },
                    { value: 4, text: '珠海' }
                ],
                2: [
                    { value: 5, text: '南宁' },
                    { value: 6, text: '桂林' }
                ],
                3: [
                    { value: 7, text: '武汉' },
                    { value: 8, text: '鄂州' }
                ]
            },
            subdivisions = {
                1: [
                    { value: 1, text: '福田' },
                    { value: 2, text: '南山' },
                    { value: 3, text: '罗湖' },
                    { value: 4, text: '宝安' },
                    { value: 5, text: '龙华' },
                    { value: 6, text: '光明' },
                    { value: 7, text: '坪山' },
                    { value: 8, text: '大鹏' }
                ],
                2: [
                    { value: 9, text: '越秀' },
                    { value: 10, text: '海珠' },
                    { value: 11, text: '天河' },
                    { value: 12, text: '荔湾' },
                    { value: 13, text: '白云' },
                    { value: 14, text: '黄埔' },
                    { value: 15, text: '南沙' },
                    { value: 16, text: '番禺' },
                    { value: 17, text: '花都' },
                    { value: 18, text: '增城' },
                    { value: 19, text: '从化' }
                ],
                3: [
                    { value: 20, text: '禅城' },
                    { value: 21, text: '顺德' },
                    { value: 22, text: '南海' },
                    { value: 23, text: '三水' },
                    { value: 24, text: '高明' }
                ],
                4: [
                    { value: 25, text: '香洲' },
                    { value: 26, text: '斗门' },
                    { value: 27, text: '金湾' },
                    { value: 28, text: '横琴' }
                ],
                5: [
                    { value: 29, text: '兴宁' },
                    { value: 30, text: '江南' },
                    { value: 31, text: '青秀' },
                    { value: 32, text: '西乡塘' },
                    { value: 33, text: '邕宁' },
                    { value: 34, text: '良庆' },
                    { value: 35, text: '武鸣' }
                ],
                6: [
                    { value: 36, text: '秀峰' },
                    { value: 37, text: '叠彩' },
                    { value: 38, text: '象山' },
                    { value: 39, text: '七星' },
                    { value: 40, text: '雁山' },
                    { value: 41, text: '临桂' }
                ],
                7: [
                    { value: 42, text: '江岸' },
                    { value: 43, text: '江汉' },
                    { value: 44, text: '硚口' },
                    { value: 45, text: '汉阳' },
                    { value: 46, text: '武昌' },
                    { value: 47, text: '青山' },
                    { value: 48, text: '洪山' },
                    { value: 49, text: '蔡甸' },
                    { value: 50, text: '江夏' },
                    { value: 51, text: '黄陂' },
                    { value: 52, text: '新洲' },
                    { value: 53, text: '东西湖' },
                    { value: 54, text: '汉南' }
                ],
                8: [
                    { value: 55, text: '鄂城' },
                    { value: 56, text: '梁子湖' },
                    { value: 57, text: '华容' }
                ]
            };

        function getData(region, division) {
            var arr;

            if (division) {
                arr = subdivisions[division];
            } else if (region) {
                arr = divisions[region];
            } else {
                arr = regions;
            }

            return arr;
        }
        reg = $('#reg').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            touchUi: false,
            placeholder: '选择省份...',
            label: '省份',
            data: getData(),
            onSet: function (ev, inst) {
                div.settings.invalid.length = 0
                div.setVal('', true);
                div.refresh(getData(inst.getVal()));
                div.enable();

                sub.settings.invalid.length = 0;
                sub.setVal('', true);
                sub.refresh([emptyValue]);
                sub.disable();
            },
            onChange: function (event, inst) {
                $('#div').mobiscroll('show');
                return false;
            }
        }).mobiscroll('getInst');

        div = $('#div').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            touchUi: false,
            disabled: true,
            placeholder: '选择城市...',
            label: '城市',
            data: [emptyValue],
            onSet: function (ev, inst) {
                sub.settings.invalid.length = 0;
                sub.setVal('', true);
                sub.refresh(getData(null, inst.getVal()));
                sub.enable();
            },
            onChange: function (event, inst) {
                $('#sub').mobiscroll('show');
                return false;
            }
        }).mobiscroll('getInst');

        sub = $('#sub').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            touchUi: false,
            disabled: true,
            placeholder: '选择区域...',
            label: '区域',
            data: [emptyValue]
        }).mobiscroll('getInst');
        $('#clear').click(function () {
            $('#reg').mobiscroll('clear');
            $('#div').mobiscroll('clear');
            $('#sub').mobiscroll('clear');
            return false;
        });

                                    <select id="select01">
                                        <option value="北京">北京</option>
                                        <option value="上海">上海</option>
                                        <option value="重庆">重庆</option>
                                        <option value="深圳">深圳</option>
                                        <option value="广州" selected>广州</option>
                                        <option value="珠海">珠海</option>
                                        <option value="惠州">惠州</option>
                                        <option value="南昌">南昌</option>
                                        <option value="赣州">赣州</option>
                                        <option value="宜春">宜春</option>
                                        <option value="九江">九江</option>
                                    </select>
                                    <select id="select02">
                                        <option value="北京">北京</option>
                                        <option value="上海">上海</option>
                                        <option value="重庆">重庆</option>
                                        <option value="深圳">深圳</option>
                                        <option value="广州">广州</option>
                                        <option value="珠海">珠海</option>
                                        <option value="惠州">惠州</option>
                                        <option value="南昌">南昌</option>
                                        <option value="赣州">赣州</option>
                                        <option value="宜春">宜春</option>
                                        <option value="九江">九江</option>
                                    </select>
                                    <select id="select03">
                                        <option value="北京">北京</option>
                                        <option value="上海">上海</option>
                                        <option value="重庆" selected="">重庆</option>
                                        <optgroup label="广东省">
                                            <option value="深圳">深圳</option>
                                            <option value="广州" disabled="">广州</option>
                                            <option value="珠海">珠海</option>
                                            <option value="惠州">惠州</option>
                                        </optgroup>
                                        <optgroup label="湖南省">
                                            <option value="长沙">长沙</option>
                                            <option value="株洲">株洲</option>
                                            <option value="岳阳">岳阳</option>
                                            <option value="张家界">张家界</option>
                                        </optgroup>
                                        <optgroup label="江西省">
                                            <option value="南昌">南昌</option>
                                            <option value="赣州">赣州</option>
                                            <option value="宜春">宜春</option>
                                            <option value="九江">九江</option>
                                        </optgroup>
                                    </select>
                                    <select id="select04"></select>
                                    <select id="select05"></select>
                                    <select id="select06">
                                        <option value="夏朝">夏朝是中国史书中记载的第一个世袭制朝代。一般认为夏朝是多个部落联盟或复杂酋邦形式的国家。</option>
                                        <option value="商朝">商朝，是中国历史上的第二个朝代，是中国第一个有直接的同时期的文字记载的王朝。</option>
                                        <option value="周朝">周朝中国历史上继商朝之后的第三个也是最后一个世袭奴隶制王朝。</option>
                                        <option value="春秋">春秋时期是中国历史奴隶社会的瓦解时期。自公元前770年至公元前476年这段历史时期，史称“春秋时期”。</option>
                                        <option value="秦朝">秦朝，是由战国时期的秦国发展起来的中国历史上第一个大一统王朝，传三世，共两帝一王，国祚共十四年。</option>
                                        <option value="汉朝">汉朝是继秦朝之后的大一统王朝，分为西汉和东汉两个时期，共历二十九帝，享国四百零五年。</option>
                                        <option value="三国">三国是上承东汉下启西晋的一段历史时期，分为曹魏、蜀汉、东吴三个政权。</option>
                                        <option value="晋朝">晋朝上承三国下启南北朝，分为西晋与东晋两个时期，两晋共传十五帝，共一百五十五年。</option>
                                        <option value="十六国">十六国是中国历史上的一段大分裂时期。该时期自李雄和刘渊分别建立成国和汉赵时起，至北魏拓跋焘灭北凉为止。</option>
                                        <option value="南北朝">南北朝是南朝和北朝的合称。南北朝时期是中国历史上的一段大分裂时期。</option>
                                        <option value="隋朝">隋朝是中国历史上承南北朝下启唐朝的大一统王朝，历二帝，享国三十八年。</option>
                                        <option value="唐朝">唐朝是继隋朝之后的大一统王朝，共历二十一帝，享国二百八十九年，是公认的中国最强盛的时代之一。</option>
                                        <option value="五代十国">五代十国是中国历史上的一段大分裂时期。是对五代（907年—960年）与十国（902年—979年)的合称。</option>
                                        <option value="宋朝">宋朝中国历史上承五代十国下启元朝的朝代，分北宋和南宋两个阶段，共历十八帝，享国三百一十九年。</option>
                                        <option value="元朝">元朝是蒙古族建立的王朝，定都大都（今北京），传五世十一帝，历时九十八年。</option>
                                        <option value="明朝">明朝是中国历史上最后一个由汉族建立的大一统王朝，共传十六帝，享国276年。</option>
                                        <option value="清朝">清朝是中国历史最后一个封建王朝，共传十帝，享国二百六十八年。</option>
                                    </select>
                                    <select id="select07">
                                        <option value="北京">北京</option>
                                        <option value="上海">上海</option>
                                        <option value="重庆">重庆</option>
                                        <option value="深圳">深圳</option>
                                        <option value="广州">广州</option>
                                        <option value="珠海">珠海</option>
                                        <option value="惠州">惠州</option>
                                        <option value="南昌">南昌</option>
                                        <option value="赣州">赣州</option>
                                        <option value="宜春">宜春</option>
                                        <option value="九江">九江</option>
                                    </select>
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">所在位置：</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <div class="ax-row">
                                                        <div class="ax-col ax-col-8"><select id="reg"></select><span class="ax-pos-right">省</span></div>
                                                        <span class="ax-gutter-md"></span>
                                                        <div class="ax-col ax-col-8"><select id="div"></select><span class="ax-pos-right">市</span></div>
                                                        <span class="ax-gutter-md"></span>
                                                        <div class="ax-col ax-col-8"><select id="sub"></select><span class="ax-pos-right">县/区</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <a href="###" class="ax-form-btn ax-btn ax-icon ax-round" id="clear"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></a>
                                        </div>
                                    </div>

以下列举MobiScroll中下拉菜单常用的参数说明，更多请参见官方API。

theme:'ax' 主题风格，ax是本框架的定制主题风格，简约美观，欢迎使用。
lang:'zh' 插件的语言，zh是指中文。
onInit 初始化事件，实例中初始化增加指示箭头。
onBeforeShow 点击input之后的事件，实例中点击让input聚焦。
onClose 关闭插件后的事件，实例中关闭后让input失焦。
touchUi:false 关闭触屏模式，默认是true，使用false之后会隐藏确定和关闭按钮度。
display:'bubble' 显示方式，默认是bubble定位气泡，其他可选：top顶部展开，bottom底部展开，center居中窗口，inline是在页面直接呈现。
controls:['calendar', 'time'] 显示底部按钮显示方式，display:'center'时有效。
showLabel:false 是否显示名称，默认是true即显示，false则表示不显示。
inputClass:'ax-input-mbsc' 初始化给input添加样式。
cssClass:'ax-mobiscroll' 初始化给mobiscroll添加样式。
label:'城市' 下拉菜单名称，根据需要填写。
rows:'5' 显示行数，默认显示3行，根据需要填写。
group:true 是否左右分组显示，默认是false即不分组，true则表示分组。
groupLabel:'省份' 分组名称，根据需要填写。
select:'multiple' 单选还是多选，默认是单选，multiple表示可多选，等同于在select标签添加multiple属性。
multiline: 3 显示行数，针对大段文字比较有用。
maxWidth: 350 设定窗口的宽度。

MobiScroll 选择录入

MobiScroll插件可以模拟下拉菜单录入input，详细参数见API。

联动选择：

生产经理总工程师
- 工程师
  - 技术
  - 进度
  - 协调
  - 现场设计
  - 文件
  - 信息管理
- 基础施工处
  - 土方施工队
  - 机械施工队
  - 综合队
- 综合处
经营经理
- 管理部
  - 人力资源
  - 财务
  - 计划&合同
- 物质供应部
  - 管理
  - 计划
  - 采购
  - 仓储
  - 机械
- 办公室

从图片取值：

张三
李四
王五
陈六
周七
刘八

自定义格式：

生产经理总工程师
- 工程师
  - 技术
  - 进度
  - 协调
  - 现场设计
  - 文件
  - 信息管理
- 基础施工处
  - 土方施工队
  - 机械施工队
  - 综合队
- 综合处
经营经理
- 管理部
  - 人力资源
  - 财务
  - 计划&合同
- 物质供应部
  - 管理
  - 计划
  - 采购
  - 仓储
  - 机械
- 办公室

选择最终值：

生产经理总工程师
- 工程师
  - 技术
  - 进度
  - 协调
  - 现场设计
  - 文件
  - 信息管理
- 基础施工处
  - 土方施工队
  - 机械施工队
  - 综合队
- 综合处
经营经理
- 管理部
  - 人力资源
  - 财务
  - 计划&合同
- 物质供应部
  - 管理
  - 计划
  - 采购
  - 仓储
  - 机械
- 办公室

        $('#selectlist01').mobiscroll().treelist({
            theme: 'ax',
            lang:'zh',
            onInit:function(event, inst){
                $('#'+this.id+'_dummy').after('');
            },
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'bubble',
            width: [156, 136, 146],
            placeholder: '请选择...',
            labels: ['一级管理', '二级管理', '三级管理'],
            defaultValue: ['经营经理', '物质供应部', '机械']
        });

        $('#selectlist02').mobiscroll().treelist({
            theme: 'ax',
            lang:'zh',
            onInit:function(event, inst){
                $('#'+this.id+'_dummy').after('');
            },
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            onSet: function (event, inst) {
                array = event.valueText.split(' ');
                lv1 = $('#selectlist02>li').eq(array[0]).children('span').text();
                lv2 = $('#selectlist02>li').eq(array[0]).children('span').next('ul').children('li').eq(array[1]).children('span').text();
                lv3 = $('#selectlist02>li').eq(array[0]).children('span').next('ul').children('li').eq(array[1]).find('ul li').eq(array[2]).children('span').text();
                if(lv3!=''){altlv3='※'+lv3;}else{altlv3=''};
                if(lv2!=''){altlv2='※'+lv2;}else{altlv2=''};
                if(lv1!=''){altlv1=lv1;}else{altlv1=''};
                $('#'+this.id+'_dummy').val(altlv1+''+altlv2+''+altlv3);
            },
            display: 'bubble',
            width: [156, 136, 146],
            placeholder: '请选择...',
            labels: ['一级管理', '二级管理', '三级管理'],
            defaultValue: ['0', '0', '0'],
        });
        $('#selectlist03').mobiscroll().treelist({
            theme: 'ax',
            lang:'zh',
            onInit:function(event, inst){
                $('#'+this.id+'_dummy').after('');
            },
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            onSet: function (event, inst) {
                array = event.valueText.split(' ');
                lv1 = $('#selectlist03>li').eq(array[0]).children('span').text();
                lv2 = $('#selectlist03>li').eq(array[0]).children('span').next('ul').children('li').eq(array[1]).children('span').text();
                lv3 = $('#selectlist03>li').eq(array[0]).children('span').next('ul').children('li').eq(array[1]).find('ul li').eq(array[2]).children('span').text();
                if(lv3!=''){
                    $('#'+this.id+'_dummy').val(lv3);
                }else if(lv3=''){
                    $('#'+this.id+'_dummy').val(lv2);
                }else if(lv2=''){
                    $('#'+this.id+'_dummy').val(lv1);
                }else{
                    $('#'+this.id+'_dummy').val('');
                }
            },
            display: 'bubble',
            width: [156, 136, 146],
            placeholder: '请选择...',
            labels: ['一级管理', '二级管理', '三级管理'],
            defaultValue: ['0', '0', '0'],
        });
        $('#imagelist01').mobiscroll().image({
            theme: 'ax',
            lang:'zh',
            onInit:function(event, inst){
                $('#'+this.id+'_dummy').after('');
            },
            onBeforeShow:function(event, inst){//显示前的点击事件
                $('#'+this.id+'_dummy').addClass('ax-focus');//input焦点
                //inst.settings.cssClass='ax-mask';//添加遮罩
            },
            onClose: function (event, inst) {//关闭事件
                $('#'+this.id+'_dummy').removeClass('ax-focus');
            },
            display: 'bubble',
            placeholder: '请选择...',
            labels: ['职员'],
            enhance: true,
            defaultValue: ['王五'],

        });

                                                <ul id="selectlist03">
                                                    <li><span>生产经理总工程师</span>
                                                        <ul>
                                                            <li><span>工程师</span>
                                                                <ul>
                                                                    <li><span>技术</span></li>
                                                                    <li><span>进度</span></li>
                                                                    <li><span>协调</span></li>
                                                                    <li><span>现场设计</span></li>
                                                                    <li><span>文件</span></li>
                                                                    <li><span>信息管理</span></li>
                                                                </ul>
                                                            </li>
                                                            <li><span>基础施工处</span>
                                                                <ul>
                                                                    <li><span>土方施工队</span></li>
                                                                    <li><span>机械施工队</span></li>
                                                                    <li><span>综合队</li>
                                                                </ul>
                                                            </li>
                                                            <li><span>综合处</span></li>
                                                        </ul>
                                                    </li>
                                                    <li><span>经营经理</span>
                                                        <ul>
                                                            <li><span>管理部</span>
                                                                <ul>
                                                                    <li><span>人力资源</span></li>
                                                                    <li><span>财务</span></li>
                                                                    <li><span>计划&合同</span></li>
                                                                </ul>
                                                            </li>
                                                            <li><span>物质供应部</span>
                                                                <ul>
                                                                    <li><span>管理</span></li>
                                                                    <li><span>计划</span></li>
                                                                    <li><span>采购</span></li>
                                                                    <li><span>仓储</span></li>
                                                                    <li><span>机械</span></li>
                                                                </ul>
                                                            </li>
                                                            <li><span>办公室</span></li>
                                                        </ul>
                                                    </li>
                                                </ul>

MobiScroll 侧边窗

MobiScroll插件没有侧边呈现方式，本框架自主写了侧边窗口效果。使用方法如下：

第一步：在onMarkupReady事件中添加$(event.target).addClass('ax-mask ax-side-left');，如果是右侧滑窗对应的是ax-side-right；
第二步：添加animate属性，如果是左侧滑窗填写animate:'toleft'；如果是右侧滑窗填写animate:'toright'；
第三步：display使用'bottom'；

左侧窗：

右侧窗：

        $('#side01').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onMarkupReady: function (event, inst) {
                $(event.target).addClass('ax-mask ax-side-left');//添加遮罩
            },
            animate:'toright',
            display: 'bottom',
            rows:5,
            select:'multiple',
            label: '城市',
        });
        $('#side02').mobiscroll().select({
            theme: 'ax',
            lang:'zh',
            onMarkupReady: function (event, inst) {
                $(event.target).addClass('ax-mask ax-side-right');//添加遮罩
            },
            animate:'toleft',
            display: 'bottom',
            rows:5,
            select:'multiple',
            label: '城市',
        });

                                                <select id="side01">
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                    <option value="深圳">深圳</option>
                                                    <option value="广州" selected>广州</option>
                                                    <option value="珠海">珠海</option>
                                                    <option value="惠州">惠州</option>
                                                    <option value="南昌">南昌</option>
                                                    <option value="赣州">赣州</option>
                                                    <option value="宜春">宜春</option>
                                                    <option value="九江">九江</option>
                                                </select>
                                                <select id="side02">
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                    <option value="深圳">深圳</option>
                                                    <option value="广州" selected>广州</option>
                                                    <option value="珠海">珠海</option>
                                                    <option value="惠州">惠州</option>
                                                    <option value="南昌">南昌</option>
                                                    <option value="赣州">赣州</option>
                                                    <option value="宜春">宜春</option>
                                                    <option value="九江">九江</option>
                                                </select>