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>
<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 multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<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+其他属性的调用方式。
- 修改了克隆的input的class类，以便于css控制。
- 取消居右排列的样式，中文环境没有此类需求。
- 新增参数clasName，支持自定义样式。
- 增加对axSelect=*属性的支持。
- 增加对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元素使用width属性，属性值需要带上单位，比如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='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>
不可选
有两种方式禁用实例，首推新增方法：对元素使用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='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 axSelect='searchEnabled:true'>
<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="北京,上海,重庆" axSelect='placeholder:"输入文字...",removeItemButton:true'/>
</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='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='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='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='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='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='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='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='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">actionbar：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country",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">popup：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country",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">inline：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input name="username" placeholder="请点击选择..." type="text" axScrollSelect='wheels:"#ss-country",type:"inline"'>
</div>
</div>
</div>
</div>