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)。

插件方法

原生的下拉菜单不美观,而且在不同浏览器下有不同显示结果,为了保持风格统一改进体验,本框架在choices.js基础上进一步美化了select元素,并将该插件与本框架进行了深度融合,目前所使用的版本是v9.0.1。原始插件详见Github。本框架主要改进内容如下:

  • 将原插件的一些公共方法转移为ax.js的公共方法。
  • 更新了fuse.js插件版本,并转移为ax.js的公共插件。
  • 修改了插件的css命名方式。
  • 修改了插件的调用方式,增加axSelect+data-*属性的调用方式。
  • 修改了克隆的input的class类,以便于css控制。
  • 取消居右排列的样式,中文环境没有此类需求。
  • 新增参数clasName,支持自定义样式。
  • 增加对data-*属性的支持。
  • 增加对axInstance()方法的支持。
  • 增加对disabled参数,通过参数直接禁用实例。
  • 操作方法增加callback参数,this均指向实例。
  • 新增参数width,支持自定义宽度。

使用方法

插件运行方式有两种:

  • ax*属性:对input或select标签使用axSelect属性即可按默认参数运行插件。
  • js实例:通过new axSelect('#ID')方式创建实例运行。
选择城市:
选择城市:
  •                                     <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 axSelect>
                                                            <option value="">请选择..</option>
                                                            <option value="北京">北京</option>
                                                            <option value="上海">上海</option>
                                                            <option value="重庆">重庆</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div class="ax-break-md"></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 id="city">
                                                            <option value="">请选择..</option>
                                                            <option value="北京">北京</option>
                                                            <option value="上海">上海</option>
                                                            <option value="重庆">重庆</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                            
  •                                             let city = document.querySelector('#city');
                                                new axSelect('#city');
                                            

定义宽度

下拉菜单默认是100%的宽度,如果需要自定义宽度有三个方法:

  • 对select或input直接写上样式,比如style="width:100px;"
  • 对select或input元素使用data-width属性,属性值需要带上单位,比如data-width="100px"
  • js调用的时候,对实例使用width属性,比如width:'100px'
选择城市:
选择城市:
                                    <select axSelect style="width:200px">
                                        <option value="">请选择..</option>
                                        <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 axSelect data-width="150px">
                                                        <option value="">请选择..</option>
                                                        <option value="北京">北京</option>
                                                        <option value="上海">上海</option>
                                                        <option value="重庆">重庆</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    

选项分组

对option使用optgroup包裹即可。

选择城市:
        <select axSelect>
            <option value="">请选择..</option>
            <optgroup label="直辖市">
                <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>
            <optgroup label="江西省">
                <option value="南昌">南昌</option>
                <option value="赣州">赣州</option>
                <option value="宜春">宜春</option>
                <option value="九江">九江</option>
            </optgroup>
        </select>
                                    

不可选

有两种方式禁用实例,首推新增方法:对元素使用data-disabled="true"属性即可实现禁止下拉和禁止选项;此外也可使用插件自身的disable()方法禁用

如果要禁用选项,可像常规的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 axSelect data-disabled="true">
                                                        <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 axSelect>
                                                        <option value="">请选择..</option>
                                                        <option value="北京">北京</option>
                                                        <option value="上海">上海</option>
                                                        <option value="重庆" disabled>重庆</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    

多选

可像常规的select那样,对select使用multiple属性即可。可配合常用参数使用:

  • removeItemButton:是否显示删除选项按钮,默认是false,可使用true调用
  • maxItemCount:最多能选几项,默认不限制
选择城市:
                                <select axSelect multiple>
                                    <option value="">请选择...</option>
                                    <optgroup label="直辖市">
                                        <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>
                                    <optgroup label="江西省">
                                        <option value="南昌">南昌</option>
                                        <option value="赣州">赣州</option>
                                        <option value="宜春">宜春</option>
                                        <option value="九江">九江</option>
                                    </optgroup>
                                </select>
                            

使用搜索

使用searchEnabled属性即可启用模糊搜索。可配合常用参数使用:

  • searchChoices:是否可筛选选项,默认是true,可使用false
  • searchResultLimit:筛选结果最多显示几个,默认是4
  • searchPlaceholderValue:检索框提示文字,默认为空
选择城市:
                                <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 axSelect data-searchEnabled="true" data-searchPlaceholderValue="输入关键字...">
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆" selected>重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            

默认选择

可像常规的select那样,对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 axSelect>
                                                    <option value="">请选择..</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆" selected>重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                               </div>
                                    

手动创建选项

如果元素是input的话可将之当做手动创建选项的方法。使用回车键创建选项,使用Backspace键删除选项。

选择城市:
                            <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">
                                            <input type="text" value="北京,上海,重庆" data-placeholder="输入文字..." data-removeItemButton="true" axSelect/>
                                        </div>
                                    </div>
                                </div>
                            </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 id="operate">
                                                            <option value="北京">北京</option>
                                                            <option value="上海">上海</option>
                                                            <option value="重庆">重庆</option>
                                                        </select>
                                                    </div>
                                                    <div class="ax-valid ax-color-primary" id="result"></div>
                                                </div>
                                                <a href="###" class="ax-form-btn ax-btn ax-primary" id="get">获取</a>
                                                <a href="###" class="ax-form-btn ax-btn ax-primary" id="add">增加</a>
                                                <a href="###" class="ax-form-btn ax-btn ax-primary" id="change">选择</a>
                                                <a href="###" class="ax-form-btn ax-btn ax-primary" id="clear">清除</a>
                                            </div>
                                        </div>
                                            
  •             let operate = new axSelect('#operate'),
                    get = document.querySelector('#get'),
                    clear = document.querySelector('#clear'),
                    add = document.querySelector('#add'),
                    change = document.querySelector('#change'),
                    result = document.querySelector('#result');
    
                get.onclick = function () {
                    result.innerHTML = operate.getValue(true, function () {
                        alert('获取了');
                    }).toString();
                }
                add.onclick = function () {
                    operate.setValue([
                        { value: '南京', label: '南京' },
                        { value: '呼和浩特', label: '呼和浩特' },
                    ], function () {
                        alert('新增了');
                    });
                }
                change.onclick = function () {
                    operate.setChoiceByValue('上海', function () {
                        alert('选好了“上海”');
                    });
                }
                clear.onclick = function () {
                    operate.clearChoices(function () {
                        alert('删除了');
                    });
                }
                                            

不同尺寸

本框架对select下拉菜单支持四种尺寸,分别是ax-xs(高22px)、ax-sm(高28px)、ax-md(高38px)和ax-lg(高48px),使用size属性即可实现;如果是ax-form-group组合菜单,请同时给组合菜单追加尺寸类。

特小尺寸:
小型尺寸:
中型型尺寸:
大型尺寸:
                                <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 axSelect data-size="xs">
                                                    <option value="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 axSelect data-size="sm">
                                                    <option value="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 axSelect>
                                                    <option value="md">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 axSelect data-size="lg">
                                                    <option value="lg">ax-lg(48px)</option>
                                                    <option value="北京">北京</option>
                                                    <option value="上海">上海</option>
                                                    <option value="重庆">重庆</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                

滑轮选择

鉴于mobiscroll的优点,本框架对另外物色了一款类似的滑轮选择插件mobileselect,并进行了大改以完全融入ax框架中。该插件为国内朋友所创建,详见Github。本框架做了如下改动:

  • 可直接应用在input上,将最终值赋予input
  • 将原插件AX风格化
  • 修改了原class样式类
  • 去掉setStyle方法
  • 新增了className属性,并修改了创建窗口Dom的方法
  • 去掉setTitle方法
  • 修改了renderWheels方法
  • 去掉checkIsPC方法,使用框架自带的axIsMobi方法
  • 在PC端支持滚轮操作
  • 增加打开类型,默认dialog,可选择popup和inline
  • 增加labels参数,以显示列名
  • 修改了Dom的class类
  • 增加label,groupLabel和labels参数,以显示列名
  • 增加setActive方法,给当前选项增加class类
  • 修复mouseup离开wheel之后松开鼠标导致的粘滞Bug
  • 回调函数修改this指向实例本身
  • 默认keyMap新增name属性,默认显示name,如果没有name则显示value
  • 增加final属性,确认后填入的值仅仅是最后一列的值
  • 可从ul+li树和select下拉菜单取得数据
  • 增加数据类型参数type,date是指日期,dataTime,array是默认值
  • 新增getDate方法,获取日期
  • 窗口标题随着滚动而改变内容
  • 增加type参数,窗口不仅能在底部滑出还能以气泡和行内元素显示
  • 新增setTitle方法和setValue方法

使用方法

插件运行方式有两种:

  • ax*属性:对input或div绑定axScrollselct属性即可按默认参数运行插件。
  • js实例:通过new axScrollselct('#ID',{参数})方式创建实例运行。

使用该插件首先需要有数据源,数据源目前可来源select下拉菜单,ul+li树结构,以及定义json变量。

使用select数据:
使用ul数据:
使用json数据:
  •                                         <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">使用select数据:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">
                                                            <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="#ss-city">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ax-break"></div>
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">使用ul数据:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">
                                                            <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="#ss-country">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ax-break"></div>
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">使用json数据:</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-input">
                                                            <input name="username" placeholder="请点击选择..." type="text" id="car">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
  •             let car = [
                    { id: "1", value: "兰博基尼" },
                    {
                        id: "2", value: "劳斯莱斯", children: [
                            { id: "1", value: "曜影", },
                            {
                                id: "2", value: "幻影", children: [
                                    { id: "1", value: "标准版", },
                                    { id: "2", value: "加长版", },
                                    { id: "3", value: "巅峰之旅", },
                                    { id: "4", value: "流光熠世", },
                                    { id: "5", value: "都会典藏版", },
                                ],
                            },
                            {
                                id: "3", value: "古思特", children: [
                                    { id: "1", value: "加长版", },
                                    {
                                        id: "2", value: "永恒之爱",
                                    },
                                    { id: "3", value: "英骥", },
                                    { id: "4", value: "阿尔卑斯典藏版", },
                                ],
                            },
                            {
                                id: "4", value: "魅影", children: [
                                    { id: "1", value: "标准版", },
                                    { id: "2", value: "Black Badge", },
                                ],
                            },
                        ],
                    },
                    {
                        id: "3", value: "宾利", children: [
                            {
                                id: "1", value: "慕尚", children: [
                                    { id: "1", value: "标准版", },
                                    { id: "2", value: "极致版", },
                                ],
                            },
                            {
                                id: "2", value: "欧陆", children: [
                                    { id: "1", value: "尊贵版", },
                                    { id: "2", value: "敞篷标准版", },
                                    { id: "3", value: "敞篷尊贵版", },
                                ],
                            },
                        ],
                    },
                    {
                        id: "4", value: "法拉利",children: [
                            {id: "1",value: "LaFerrari", },
                            {id: "2",value: "法拉利488", },
                            {id: "3",value: "GTC4Lusso",
                            },
                        ],
                    },
                    {
                        id: "5",value: "玛莎拉蒂",children: [
                            {id: "1",value: "总裁",},
                            {id: "2",value: "玛莎拉蒂GT",},
                            {id: "3",value: "Levante",},
                        ],
                    },
                ];
                new axScrollSelect('#car', {
                    wheels: [{data:car}],
                });
                                            

滚轮日期

有网友基于mobileselect插件改写了一款jQ的日期插件,本框架借鉴其写的日期函数,整合进来,是本插件支持选择年与日。

若要激活年月日选择,请将wheels的参数格式改成:date-1990-2021-ymd。使用方法如下:

  • 四个参数必须用短横分开。
  • 第一个参数date是表明数据类型,固定参数,不可更改。
  • 第二个参数是开始年份,默认是auto。
  • 第三个参数是结束年份,默认是auto。
  • 第四个参数是数据结构,默认是ymd,即显示年月日,可选择ym(年月)。
  • 如果起/止年份填auto,那么结束年份将是今年,开始年份是往前推20年。
年月日:
年月:
今天年月日:
                                <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">
                                                <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="date-1990-2021-ymd">
                                            </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">
                                                <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="date-1990-2021-ym">
                                            </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">
                                                <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="date-auto-auto-ymd">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                

选择日期最好使用专业的日期选择插件,详见axDate插件

多列独立数据

wheels参数接收数据来源,基本格式是[{data:数据一},{data:数据二},{data:数据三}...],有几组数据就会渲染成几列滚轮。

多列数据:
  •                                     <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">
                                                        <input name="username" placeholder="请点击选择..." type="text" id="cols">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                            
  •             let week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
                let time = ["08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00",];
                new axScrollSelect('#cols', {
                    wheels: [{ data: week },{ data: time }],
                });
                                            

显示位置

该插件的type参数可设置窗口风格,默认是actionbar(底部滑出遮罩窗口),可选择popup(用axPopup包裹窗口),inline(行内显示,不定位)

actionbar:
popup:
inline:
                                    <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">
                                                    <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="#country" data-type="actionbar">
                                                </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">
                                                    <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="#country" data-type="popup">
                                                </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">
                                                    <input name="username" placeholder="请点击选择..." type="text" axScrollSelect data-wheels="#country" data-type="inline">
                                                </div>
                                            </div>
                                        </div>
                                    </div>