formSelects基于 Layui 的 select 多選解決方案
formSelects-v4.js 基于Layui的多選解決方案
使用方式
//1.下載formSelects-v4.1
//2.模塊化使用
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全局定義一次, 加載formSelects
layui.config({
base: '../src/' //此處路徑請自行處理, 可以使用絕對路徑
}).extend({
formSelects: 'formSelects-v4'
});
//加載模塊
layui.use(['formSelects'], function(){
var formSelects = layui.formSelects;
});
</script>
//3.非模塊化使用
<script src="layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var formSelects = layui.formSelects;
</script>
基本參數(shù)
| 屬性名 | 說明 | 示例 |
|---|---|---|
| xm-select | 多選核心, 標記不同的多選, 多選ID | xm-select="id" |
| xm-select-max | 多選最多選擇數(shù)量 | xm-select-max="3" |
| xm-select-skin | 皮膚 | xm-select-skin=" default | primary | normal | warm | danger " |
| xm-select-search | 本地搜索 & 遠程搜索 | xm-select-search, xm-select-search="/search", 值為空時已有條目過濾搜索, 有值時開啟遠程搜索 |
| xm-select-create | 條目不存在時創(chuàng)建, 標記性屬性 | xm-select-create |
| xm-select-direction | 下拉方向 | xm-select-direction="auto|up|down", 自動, 上, 下, 默認自動模式 |
| xm-select-height | 標記select高度是否固定 | xm-select-height="36px", 高度不再隨數(shù)據(jù)變化而變化 |
| xm-select-radio | 單選模式 | xm-select-radio, 最多只能選擇一個 |
| xm-select-search-type | 搜索框的顯示位置 | xm-select-search-type="title" 在下拉選title部分顯示, xm-select-search-type="dl" 在選項的第二條顯示 |
| xm-select-show-count | 多選顯示的label數(shù)量 | xm-select-show-count="2", 超出后隱藏 |
效果圖
評論
圖片
表情