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>
                                        

使用搜索

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

选择城市:
  • <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>