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（v9.0.1），原生开发了select下拉选择插件，主要功能如下：
- 支持多种数据源，包括select、ul+li、datalist节点数据，本地json数据和异步json和sql数据
- 支持单选和多选
- 支持input模式添加、编辑和删除操作
- 支持四种尺寸，xs、sm、md和lg，以配合构建不同风格的表单
- 支持自动宽度和自定义宽度
- 支持模糊检索和精确检索
- 支持一维数组和二维数组，二维数组可对数据列表进行分组显示
- 可保存当前selected数据，初始化后展示保存前的selected状态
- 支持创建新选项和删除旧选项
- 支持新增selected项和移除selected项
使用方法
插件运行方式有两种：
- 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>北京</option> <option>上海</option> <option>重庆</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>北京</option> <option>上海</option> <option>重庆</option> </select> </div> </div> </div> </div> -
let city = document.querySelector('#city'); new axSelect('#city');
初始值选中
如果要设置选中有三个方法：
- 1、如果是从树节点获取数据，那么在选项写上
selected属性即可 - 2、如果通过json获取数据那么可设置
selected:true即可 - 3、通过参数selected设置禁用项，selected参数可使用的值如下：
- 一个数字，将从数据id进行查找
- 一个字符串包含带英文逗号的字符串，将分别从id、label和value进行查找
- 一个对象，类似{id:0,label:'北京'}，将以比对属性值的方式进行查找
- 一个数组，数组中每一项可以是以上三种类型
选择城市：
<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="重庆" selected>重庆</option>
</select>
</div>
</div>
</div>
</div>
初始化禁用
如果需要禁止触发展开下拉菜单，可使用参数readonly:true。
如果要禁用选项有三个方法：
- 1、如果是从树节点获取数据，那么在选项写上
disabled属性即可 - 2、如果通过json获取数据那么可设置
disabled:true即可 - 3、通过参数disabled设置禁用项，disabled参数可使用的值如下：
- 一个数字，将从数据id进行查找
- 一个字符串包含带英文逗号的字符串，将分别从id、label和value进行查找
- 一个对象，类似{id:0,label:'北京'}，将以比对属性值的方式进行查找
- 一个数组，数组中每一项可以是以上三种类型
全部禁用：
禁用选项：
<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='readonly:true'>
<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="重庆" disabled>重庆</option>
</select>
</div>
</div>
</div>
</div>
传值
数据列表每一项均有label和value属性，其中label属性是必须的，如果没有value那么将以label值作为value值进行输出；大多数情况label与value只是对应关系，并不一定是一致的，可以自定义value值。默认回显label值，如果需要指定回显属性可设置displayProp，例如displayProp:'value'
定义value：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">定义value：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select axSelect>
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="CQ">重庆</option>
</select>
</div>
</div>
</div>
</div>
所有属性
一条完整的选项可编辑的数据属性如下：
id：自定义选项的id，如果不填则有插件自动生成，自动生成的第一项id随参数idStartlabel：自定义选项的可见文本，最终呈现在选项左侧value：自定义选项的value值，如果不填将等于labeltip：自定义选项的提示文本，最终呈现在选项右侧legend：自定义选项的图标，为class类，例如“ax-icon-star”image：自定义选项的小图片，为图片地址selected：设置选项的默认selected状态disabled：设置选项的默认disabled状态
数据渲染完毕还会自动添加上node（数据源的项目节点）和dom（下拉列表项目节点）属性。
-
<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="listIns"> <option tip="首都" legend="ax-icon-star">北京</option> <option tip="金融中心" image="<?=$public?>images/head01.jpg">上海</option> <option selected>重庆</option> </select> </div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="viewList">查看选项数据</a> </div> </div> -
let listIns = new axSelect('#listIns', { idStart: 11 }), viewList = document.querySelector('#viewList'); viewList.onclick = () => { console.log(listIns.data); }
绑定元素
本插件可绑定两种节点元素，分别是select和input。绑定select之后将直接从select的选项中获取数据；而绑定input则需要从外部获取数据，插件绑定input则自动是多选模式。以上演示了select绑定插件，以下演示input绑定插件。
绑定input：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">绑定input：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axSelect="content:'#dataSelet'" />
</div>
</div>
</div>
</div>
<select id="dataSelet" style="display: none;">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
选项分组
对于绑定select元素而言，option使用optgroup包裹即可实现分组。
如果从ul+li获取数据，通过ul+li的父子关系也自然形成分组；如果从datalist获取数据，datalist若存在optgroup节点也可形成分组；如果从json取得数据，如果有children属性也会形成分组。
选择城市：
<select axSelect>
<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>
多选
对于绑定select元素而言，对select使用multiple属性即可实现多选；对于绑定input元素而言，则自动是多选。可配合常用参数使用：
- least:至少选择几项，默认不限制，一般不用
- most:最多能选几项，默认不限制
multiple多选：
<select axSelect multiple>
<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>
数据源
本插件支持多种数据源：
- 1、物理节点数据，可从select、ul+li和datalist中获取数据，通过
content参数设为#id、.classname或节点 - 2、将当页的json数组数据，有
children属性将被定义为parent对象，通过content设置json文件地址，并将async参数设为true - 3、异步的json文件或sql数据库数据，有children属性将被定义为parent对象，通过
content设置j动态页面地址，并将async参数设为true
本数据中的可设置属性包括id、label、value、tip、selected、disabled、children、legend和image；通常id由插件自动创建；如果使用了children属性表名该节点将作为分组父节点存在。
以上示例已经演示了从select中获取数据，以下演示其他获得数据的方法。
ul+li：
datalist：
json数组：
异步json：
异步sql：
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">ul+li：</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" axSelect="content:'#dataUl'" /> </div> </div> </div> </div> <ul id="dataUl" style="display:none;"> <li><i value="北京">北京</i></li> <li><i value="上海">上海</i></li> <li><i value="重庆">重庆</i></li> </ul> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">datalist：</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" axSelect="content:'#dataList'" /> </div> </div> </div> </div> <datalist id="dataList"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> </datalist> <div class="ax-break-md"></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 type="text" id="arrIns" /> </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">异步json：</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="jsonIns" /> </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">异步sql：</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="sqlIns" /> </div> </div> </div> </div> -
let dataCities = [ { id: 0, label: '北京', value: '北京' }, { id: 1, label: '上海', value: '上海' }, { id: 2, label: '重庆', value: '重庆' }, ] new axSelect('#arrIns', { content: dataCities }); new axSelect('#jsonIns', { content: 'ajax/cities.json', async: true, }); new axSelect('#sqlIns', { content: 'ajax/citiesSql.php', async: true, }); -
[ { "id": 0, "value":"ZX", "label": "直辖市", "tip":"共4个直辖市", "children": [ { "id": 1, "value":"BJ", "label": "北京市" }, { "id": 2, "value":"SH", "label": "上海市" }, { "id": 3, "value":"TJ", "label": "天津市", "selected":true }, { "id": 4, "value":"CQ", "label": "重庆市" } ] }, { "id": 5, "value":"GD", "label": "广东省", "tip":"共21个地级市", "children": [ { "id": 6, "value":"GZ", "label": "广州市", "selected":true }, { "id": 7, "value":"SZ", "label": "深圳市" }, { "id": 8, "value":"HZ", "label": "惠州市", "disabled":true }, { "id": 9, "value":"DG", "label": "东莞市" }, { "id": 10, "value":"ZS", "label": "中山市" }, { "id": 11, "value":"MM", "label": "茂名市" } ] }, { "id": 12, "value":"HN", "label": "河南省", "tip":"共17个地级市", "children": [ { "id": 13, "value":"ZZ", "label": "郑州市" }, { "id": 14, "value":"KF", "label": "开封市" }, { "id": 15, "value":"LY", "label": "洛阳市" }, { "id": 16, "value":"PDS", "label": "平顶山市" }, { "id": 17, "value":"AY", "label": "安阳市" }, { "id": 18, "value":"HB", "label": "鹤壁市" } ] }, { "id": 19, "value":"XG", "label": "香港特别行政区" }, { "id": 20, "value":"AM", "label": "澳门特别行政区" } ] -
<?php header("Content-Type:text/plain;charset=utf-8"); //连接数据库，数据库用户自己定义 $server="服务器地址"; $username="用户名"; $password="密码"; $database="数据库名"; $table = '表名'; $connect = mysql_connect($server,$username,$password) or die("数据库链接错误"); mysql_select_db($database,$connect); mysql_query("set names 'utf8'"); //检索最终数据 $sqlString="select id,pId,label,value,tip,disabled,selected from {$table}"; $sql=mysql_query($sqlString); //根据数据生成对象数组 $result = array(); while ($row = mysql_fetch_object($sql)){ //判断本id下是否有子节点，有则追加children属性 $rows2=mysql_query("select id,pId from {$table} where pId={$row->id}"); if (mysql_num_rows($rows2) > 0){ $row->children = array(); } array_push($result,$row); } $success = json_encode($result); echo $success; ?>
中国若干城市列表sql文件请点击这里下载。
定义宽度
下拉菜单默认宽度即是popup的默认宽度，如果需要自定义宽度有两个方法：
- 对select或input直接写上
style样式，比如style="width:100px;" - js调用的时候，对实例使用
width参数，比如width:'100px'
如果同时使用了以上两个方法，则以参数width为准
style宽度：
参数width：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">style宽度：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select axSelect style="width:300px">
<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">参数width：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<select axSelect='width:"250px"'>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
</div>
</div>
使用搜索
使用search参数可配置搜索功能，其有多个属性：
enable：是否开启搜索功能，默认是false，可使用true开启fuzzy：是否使用模糊搜索，默认true（input中的value将以空格分割多个关键字进行检索），可选择false精确搜索（input中的value将作为一个关键字进行检索）limit：是否限制检索结果数量，默认为0不限制，可自定义限制数量reorder：是否对检索结果按权重进行高低排序，默认false按原顺序，可选择true进行权重重排
选择城市：
<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='search:{enable:true}'>
<option value="北京">首都北京是中国历史文化名城</option>
<option value="上海">魔都上海是中国金融和贸易中心</option>
<option value="重庆">山城重庆是长江上游经济中心</option>
<option value="深圳">鹏城深圳是中国最具经济活力的城市</option>
<option value="广州">羊城广州是都市核心圈城市</option>
</select>
</div>
</div>
</div>
</div>
手动编辑
如果绑定元素是input的话可设置search.enable，启用之后除了可进行检索之外还可编辑当前的selected值，通过delete删除键删除最后一项，通过enter回车键创建新的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">
<input type="text" value="北京,上海,重庆" axSelect='search:{enable:true}' />
</div>
</div>
</div>
</div>
当检索出列表时，回车键可将列表中的项添加为selected项（先用上下箭头移动到列表中）；当没有检索结果时可直接使用回车键将当前搜索框中的文本添加为selected项，这里便发生了一个问题，如果列表中的label是“上海”，搜索框中输入“上”或者“海”都能找出来这个条信息，此时使用回车键只能将“上海”添加为selected项，无法将“上”或者“海”添加为selected项；如果需要添加label中的子字符，需要禁用下拉列表的回车添加功能。
enterSelect参数的意思是在下拉列表中使用上下箭头选择项目之后可使用回车键将该项目添加为selected项，默认true，可通过设为false禁用。
选择城市：
<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='search:{enable:true},enterSelect:false' />
</div>
</div>
</div>
</div>
如果绑定input，而且只希望使用关键字检索，不使用删除和添加等编辑功能，可将search.editable设为false。
选择城市：
<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='search:{enable:true},enterSelect:false' />
</div>
</div>
</div>
</div>
无菜单添加模式
如果不需要下拉菜单，只是绑定input进行手动添加和删除操作，可将参数dropdownShow设为false。
无默认值：
默认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"> <input type="text" axSelect="dropdownShow:false,search:{enable:true}" /> </div> </div> </div> </div> <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">默认selected值：</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="inlineIns" /> </div> </div> </div> </div> -
new axSelect('#inlineIns', { content: [ { id: 0, label: '北京', value: '北京' }, { id: 1, label: '上海', value: '上海', selected: true }, { id: 2, label: '重庆', value: '重庆', selected: true }, ], search: { enable: true, }, dropdownShow: false, });
不同尺寸
本框架对select下拉菜单支持四种尺寸，分别是ax-xs(高22px)、ax-sm(高28px)、ax-md(高38px，默认)和ax-lg(高48px)，使用size属性即可实现；如果是ax-form-group组合菜单，请同时给组合菜单追加尺寸类。
特小尺寸：
小型尺寸：
小型尺寸：
大型尺寸：
<div class="ax-row">
<span>特小尺寸：</span>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect='size:"xs"'>
<option value="xs">ax-xs(18px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect='size:"xs"' multiple>
<option value="xs">ax-xs(18px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-row">
<span>小型尺寸：</span>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect='size:"sm"'>
<option value="xs">ax-sm(22px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect='size:"sm"' multiple>
<option value="xs">ax-sm(22px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-row">
<span>小型尺寸：</span>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect>
<option value="md">ax-md(38px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect multiple>
<option value="md">ax-md(38px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-row">
<span>大型尺寸：</span>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect='size:"lg"'>
<option value="lg">ax-lg(48px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
<span class="ax-gutter"></span>
<div class="ax-col">
<select axSelect='size:"lg"' multiple>
<option value="lg">ax-lg(48px)</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
</div>
</div>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.selected：当前下拉菜单数据中的selected状态项，是数组this.value：当前selected状态项的文本值，以英文逗号隔开this.inputDom：绑定的select或input节点this.tagsDom：selected标签节点，即ax-tagsthis.listDom：下拉列表数据的节点this.inputType：绑定表单元素节点类型，有三种：select-single、select-multiple和inputthis.maxIndex：当前最大索引值this.selectDom：选择器主体节点，即ax-select节点this.clearDom：清除所有selected项的节点this.arrowDom：下拉菜单的箭头指示节点this.searchDom：关键字搜索框节点this.wrapperDom：下拉菜单外层节点this.popupIns：下拉菜单popup实例，可使用axPopup的方法和变量this.tagsIns：selected项的tags实例，可使用axTag的方法和变量this.destroyed：销毁状态this.data：下拉列表的数据，数组格式，每一项均可能包含以下属性：- id：数据编号，可以是数字也可以是uuid类的字符串
- label：选项展示的文本
- value：选项的值，如果为空将以label作为value输出
- tip：选项提示文字，放于选项右侧
- children：子元素合集，如果选项有该属性，说明该选项为分组父项
- selected：选项的是否为selected状态，选中该选项才有该属性
- disabled：选项是否为disabled状态，该选项设为disabled才有该属性
- active：第列表使用上下箭头选择之后才可能有该属性
- dom：下拉列表的li节点
- node：数据源的项目节点，比如说数据来自ul+li，那么该值为原li节点
this.searchResult：搜索结果数据，是this.data的子集
内部操作方法如下：
this.add(data, placement, callback)：增加新选项，支持两个参数- data：添加的新选项内容，支持三种格式
- 一个字符串，包含带英文逗号的字符串（添加多项）
- 一个对象，对象的可用属性包括：id、label、value、tip
- 一个数组，以上两种类型数组（添加多项）
- placement：添加位置，默认end在列表尾部添加，可选择start在最前方添加
- callback：回调函数，添加后执行，支持一个参数即当前新增加的项目数组
this.arrAdd(data, placement)：增加新选项（指定数据），支持两个参数- data：添加的新选项内容，必须是对象数组数据，每一项包含的属性有id、label和value（不必须），例如[{id:5,label:'北京'}]
- placement：添加位置，默认end在列表尾部添加，可选择start在最前方添加
this.remove(data, callback)：删除选项，支持两个参数- data：删除的选项内容，支持四种格式：
- 一个数字，将从id中查找删除项
- 一个字符串，包含带英文逗号的字符串（添加多项）
- 一个对象，对象的可用属性包括：id、label、value、tip
- 一个数组，以上三种类型数组（添加多项）
- callback：回调函数，删除后执行，支持一个参数即当前新删除的项目数组
this.arrRemove(data)：删除选项（指定数据），支持一个参数- data：删除的选项内容，必须是来自this.data中的数据即this.data的子集
this.select(data, callback)：增加selected值，支持两个：- data：用法同remove方法
- callback：回调函数，selected后执行，支持一个参数即当前新selected的项目数组
this.unselect(data, callback)：取消selected值，支持两个：- data：用法同remove方法
- callback：回调函数，取消selected后执行，支持一个参数即当前取消selected的项目数组
this.update(setting, callback)：更新插件参数，支持两个：- setting：将要更新的参数
- callback：回调函数，更新后执行，无参数
this.readonly(callback)：设置只读，支持回调函数，回调无参数this.readable(callback)：设置可读，支持回调函数，回调无参数this.clear(callback)：取消所有selected值，支持回调函数，回调无参数this.destroy(callback)：销毁实例，支持回调函数，回调无参数this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前选项和数据
- 对象格式，比如setting={selected:1,diabled:3}
- callback：回调函数，支持一个参数即localstorage值：
-
<select id="methodIns" multiple> <option>北京</option> <option>上海</option> <option>重庆</option> </select> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="add">添加选项</a> <a href="###" class="ax-btn ax-primary" id="remove">删除选项</a> <a href="###" class="ax-btn ax-primary" id="disable">禁用选项</a> <a href="###" class="ax-btn ax-primary" id="enable">启用选项</a> <a href="###" class="ax-btn ax-primary" id="selected">增加selected值</a> <a href="###" class="ax-btn ax-primary" id="unselected">删除selected值</a> <a href="###" class="ax-btn ax-primary" id="clear">清除selected值</a> <a href="###" class="ax-btn ax-primary" id="readonly">设置只读</a> <a href="###" class="ax-btn ax-primary" id="readable">设置可读</a> <a href="###" class="ax-btn ax-primary" id="view">查看数据</a> -
let methodIns = new axSelect('#methodIns'), add = document.querySelector('#add'), remove = document.querySelector('#remove'), selected = document.querySelector('#selected'), unselected = document.querySelector('#unselected'), disable = document.querySelector('#disable'), enable = document.querySelector('#enable'), clear = document.querySelector('#clear'), readonly= document.querySelector('#readonly'), readable = document.querySelector('#readable'), view = document.querySelector('#view'); add.onclick = function () { methodIns.add('深圳,广州,大连,呼和浩特', 'end', (items) => { console.log('新增项', items); }); } remove.onclick = function () { methodIns.remove('广州,大连', (items) => { console.log('删除项', items); }); } selected.onclick = function () { methodIns.select('北京,上海,深圳', (items) => { console.log('新selected项', items); }); } unselected.onclick = function () { methodIns.unselect('北京', (items) => { console.log('取消selected项', items); }); } disable.onclick = function () { methodIns.disable('上海,深圳', (items) => { console.log('新增禁用项', items); }); } enable.onclick = function () { methodIns.enable('上海,深圳', (items) => { console.log('新启用项', items); }); } clear.onclick = function () { methodIns.clear(); } readonly.onclick = function () { methodIns.readonly(); } readable.onclick = function () { methodIns.readable(); } view.onclick = function () { console.log('当前文本值', methodIns.value); console.log('当前selected项', methodIns.selected); console.log('当前数据', methodIns.data) }
当使用select方法时，如果将要select的选项并不存在列表当中，插件是默认不允许添加的，但是可通过设置参数absentAddable:true，即使不存在也可作为新值添加到input当中。
-
<select id="absentIns" multiple> <option>北京</option> <option>上海</option> <option>重庆</option> </select> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="absentSelected">增加selected值</a> <a href="###" class="ax-btn ax-primary" id="absentRemove">删除项</a> -
let absentIns = new axSelect('#absentIns', { absentAddable: true,clearShow:true }), absentRemove = document.querySelector('#absentRemove'), absentSelected = document.querySelector('#absentSelected'); absentRemove.onclick = function () { absentIns.remove('广州,大连,上海,深圳', (items) => { console.log('删除项', items); }); } absentSelected.onclick = function () { absentIns.select('北京,上海,深圳', (items) => { console.log('新selected项', items); }); }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit/init初始化后执行，无参数onBeforeAdd添加前执行，回调需通过arrAdd()方法手动添加，支持一个参数即将要添加的项onAdd/add新增列表项后执行，支持一个参数即要添加的项onBeforeRemove移除前执行，回调需通过arrRemove()方法手动添加，，支持一个参数即将要移除的项onRemove/remove移除列表项后执行，支持一个参数即要移除的项onSelect/select使用selected后执行，支持一个参数要selected的项onUnselect/unselect取消selected后执行，支持一个参数要取消selected的项onDisabled/disabled禁用后执行，支持一个参数要禁用的项onEnabled/onEnable取消禁用后执行，支持一个参数要启用的项onClear/clear清除所有selected值后执行，无参数onAbsentSelect/absentSelect使用select方法时，列表不存在依然添加select值后执行，支持一个参数即当前selected项onToggleSelect/toggleSelect点击下拉菜单选项时执行，支持一个参数即当前的点击对象onMost/mostselected项超出most值后执行，支持一个参数即options.most值onLeast/leastselected小于least值后执行，支持一个参数即options.least值onUpdate/update参数更新后执行，无参数onDestroy/destroy销毁后执行，无参数onSave/save保存数据后执行，支持一个对象即保存的数据
另外下拉菜单使用的是axPopup插件，可使用this.popupIns.on(event,()=>{})方式进行打开和关闭监听；选择器使用的是axTag插件，可使用this.tagsIns.on(event,()=>{})方式进行selected值添加和删除监听。
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<select id="onIns" multiple> <option>北京</option> <option>上海</option> <option>重庆</option> </select> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="onadd">添加选项</a> <a href="###" class="ax-btn ax-primary" id="onremove">删除选项</a> <a href="###" class="ax-btn ax-primary" id="ondisable">禁用选项</a> <a href="###" class="ax-btn ax-primary" id="onenable">启用选项</a> -
let onIns = new axSelect('#onIns',{ clearShow:true, absentAddable:true, most:4, least:2 }), onadd = document.querySelector('#onadd'), onremove = document.querySelector('#onremove'), ondisable = document.querySelector('#ondisable'), onenable = document.querySelector('#onenable'); onadd.onclick = function () { onIns.add('深圳,广州,大连,呼和浩特', 'end'); } onremove.onclick = function () { onIns.remove('广州,大连'); } ondisable.onclick = function () { onIns.disable('上海,深圳'); } onenable.onclick = function () { onIns.enable('上海,深圳'); } onIns.on('add',(items)=>{ console.log('新增项', items); }).on('remove',(items)=>{ console.log('删除项', items); }).on('disabled',(items)=>{ console.log('新增禁用项', items); }).on('enabled',(items)=>{ console.log('新启用项', items); }).on('toggleSelect',(item)=>{ console.log('状态变更项', item); }).on('most',(n)=>{ console.log('selected项数量超过了', n); }).on('least',(n)=>{ console.log('selected项数量少于', n); }).on('absentSelect',(items)=>{ console.log('新增列表没有的项', items); }).on('clear',()=>{ console.log('清理了所有的selected'); }); onIns.tagsIns.on('add',(items)=>{ console.log('新增Tags', items); }).on('remove',(items)=>{ console.log('删除Tags', items); });
更新参数
通过使用update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，格式：{trigger:'hover'}
- callback：回调函数，可不填
-
<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="北京,上海,重庆" id="updateIns" /> </div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="updateBtn">更新参数</a> </div> </div> -
let updateIns = new axSelect('#updateIns'), updateBtn = document.querySelector('#updateBtn'); updateBtn.onclick = () => { updateIns.update({ content: '广州,上海,苏州,惠州,河源,桂林,株洲,哈尔滨', clearShow: true, most: 2, trigger: 'hover', disabled: '苏州', selected: '广州,惠州' }); }
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<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="北京,上海,重庆,中山,西安" id="saveIns" /> </div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="saveAdd">添加新项</a> <a href="###" class="ax-form-btn ax-btn ax-primary" id="saveUpdate">更新参数</a> <a href="###" class="ax-form-btn ax-btn ax-primary" id="saveView">查看数据</a> </div> </div> -
let saveIns = new axSelect('#saveIns', { storageName: 'myselect01' }), saveAdd = document.querySelector('#saveAdd'), saveUpdate = document.querySelector('#saveUpdate'), saveView = document.querySelector('#saveView'); saveAdd.onclick = () => { saveIns.add('深圳,广州,大连,呼和浩特', 'end'); } saveView.onclick = () => { console.log('查看数据',saveIns.data); } saveUpdate.onclick = () => { saveIns.update({ clearShow: true, most: 4, disabled: '上海,苏州', selected: '北京,广州,惠州' }); }
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<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="destroyIns"> <option>北京</option> <option>上海</option> <option>重庆</option> </select> </div> </div> <a href="###" class="ax-form-btn ax-btn ax-primary" id="destroyBtn">销毁</a> <a href="###" class="ax-form-btn ax-btn ax-primary" id="initBtn">重置</a> </div> </div> -
let destroyIns = new axSelect('#destroyIns'), destroyBtn = document.querySelector('#destroyBtn'), initBtn = document.querySelector('#initBtn'); destroyBtn.onclick = () => { destroyIns.destroy(); console.log('销毁了实例，已经不能操作了！'); } initBtn.onclick = () => { destroyIns.init(); console.log('恢复了实例，又能操作了！'); }
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axSelect({
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
storageName: '',//存储名称，字符串格式；如果需要保存实例当前数据请设定唯一的值，比如：storageName:'mystorage001'
least: 0,//至少选择几项，默认为0即不限制，可自定义
most: 0,//最多可选择几项，默认为0即不限制，可自定义
content: '',//实例内容，支持多种格式，可以是字符串（包括#id/.className/[name]/DIV等选择器）、节点、数组
async: false,//如果content是字符串，那么可能是异步请求数据，该参数默认false，可填true
trigger: 'click',//触发动作，默认是click，另可选hover事件（同axPopup插件的trigger参数）
selected: '',//设置初始值，如果是一个数字则从id中查找；如果是字符串（包括以英文逗号分隔的字符串）则从id、label和value中查找；如果是对象例如{id:0,label:'北京'}则逐个对比属性值；也可是以上值的数组。
disabled: '',//设置禁用项，使用方法同selected
clearShow: false,//是否在右侧显示清除按钮，默认false不显示，可使用true显示
removable: false,//是否显示标签删除按钮，默认false不显示，可使用true显示
separator: ',',//字符串分隔符，默认英文逗号，input的value应该与此相同，输出的value值将以此分隔值
dropdownShow: true,//是否显示下拉菜单，默认true显示，如果只需要行内编辑+回车添加模式则可使用false不显示
ajaxType: 'post',//异步提交的方式，默认post，可填get
absentAddable: false,//使用select方法时，如果下拉列表中没有指定项是否自动添加新项并作为selected项
idStart: 0,//id开始编号，数字类型；如果从物理节点创建菜单，则需要自动创建项目id，默认第一项id为0
width: '',//设置input和下拉菜单的宽度，默认为空，可使用px和rem单位
size: 'md',//设置尺寸，以配合多样化的表单使用，默认md，可设置xs(18px)、sm(28px)和lg(48px)
readonly: false,//是否禁用下拉菜单，默认false不禁用，可选择true禁用，不能使用触发展开菜单
enterSelect: true,//是否允许在下拉列表上使用回车键添加selected值，默认true允许，可选择false不允许
displayProp: '',//回显属性，如果为空则显示label值，如果需要显示value值可对将该参数设为value
singleClose: true,//如果是单选，单选完成后是否立即自动关闭菜单，默认true，可选择false不关闭
className:'',//一个或多个className，多个用英文逗号或空格隔开
language: {
inputPlaceholder: '请至少选择一项...',//input的选择提示
searchPlaceholder: '输入关键字...',//下拉列表搜索提示
editPlaceholder: '输入关键字...',//绑定input行内编辑的提示
absent: `列表中没有"<# this.value #>"可供选择！`,//select操作时不存在提示
absentAddable: `列表中没有"<# this.value #>"，但是作为新项加入了列表！`,//select操作不存在也能添加提示
empty: '没有找到符合"<# this.value #>"的选项！',//检索为空时提示
emptyAddable: '没有找到符合"<# this.value #>"的选项，请使用回车键添加！',//检索为空但是可添加提示
most: `只能最多选择"<# this.value #>"项！`,//超过most参数提示
addFail: `添加失败！列表中已经有了"<# this.value #>"这一项。`,//添加失败提示
},
search: {
enable: false,//是否显示检索控件，默认false不显示，可选择true显示
fuzzy: true, //是否使用模糊检索，默认true，可选择false精确检索
limit: 0,//筛选结果显示几项，默认为0表示不限制
reorder: false,//对检索结果是否排序，默认不重排，可选择true按权重高低重排
editable: true,//绑定input情况下是否可使用删除键和回车键进行删除和添加操作
},
dialog: {},//对话实例dialog的自定义参数
popup: {},//气泡实例popup的自定义参数
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onBeforeAdd: '',//回调函数，添加前执行，需手动添加，支持一个参数即将要添加的项
onAdd: '',//回调函数，新增列表项后执行，支持一个参数即要添加的项
onBeforeRemove: '',//回调函数，移除前执行，需手动移除，支持一个参数即将要移除的项
onRemove: '',//回调函数，移除列表项后执行，支持一个参数即要移除的项
onSelect: '',//回调函数，使用selected后执行，支持一个参数要selected的项
onUnselect: '',//回调函数，取消selected后执行，支持一个参数要取消selected的项
onDisabled: '',//回调函数，禁用后执行，支持一个参数要禁用的项
onEnabled: '',//回调函数，取消禁用后执行，支持一个参数要启用的项
onClear: '',//回调函数，清除所有selected值后执行，无参数
onAbsentSelect: '',//回调函数，使用select方法时，列表不存在依然添加select值后执行，支持一个参数即当前selected项
onToggleSelect: '',//回调函数，点击选项发生selected状态改变时执行，支持一个参数即当前的点击对象
onMost: '',//回调函数，selected项超出most值后执行，支持一个参数即options.most值
onLeast: '',//回调函数，selected小于least值后执行，支持一个参数即options.least值
onUpdate: '',//回调函数，参数更新后执行，无参数
onDestroy: '',//回调函数，销毁后执行，无参数
onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"