Bootstrap Select - 下拉

Bootstrap Select

全局引入

EApp 中默认初始化了 .select-picker 的select(在EApp.initComponents里初始化的),如需手动初始化可使用以下方式

EApp.initSelectPicker('#id');

字典

如果select中数据来源于字典,可直接在select标签中添加 data-dict-type="字典类别代码",会自动将字典插入到select中。

<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker" 
data-dict-type="commonStatus"></select>

如果需要倒序排列,可以添加data-reverse="true"属性实现

接口

如果select中数据来源于接口逗号可以直接在select标签中添加 data-url="接口地址",会自动请求接口获取数据

<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker" 
data-url="${ctxPath}/auth/sample/select/data"></select>

后端请返回以下格式数据

{
    code: 200,
    message: "请求成功",
    data: [
        {
            value: "1",
            text: "文字"
        }
    ]   
}

多选

如果select需要多选可以添加multiple属性,默认值使用data-value="1,2,3"设置,将多选的option->value使用,拼接

<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker" multiple></select>

静态

如果select内容为固定内容,请直接写option

<!-- 举个栗子 -->
<select class="form-control e-bootstrap-select select-picker">
    <option value="1">文字</option>
</select>
  • 如需显示搜索框请添加 data-live-search="true"
  • 如需多选请添加 multiple
  • 其他需求请参照官方文档
  • 如数据来源于字典或接口,默认会添加空选项,如不需要请添加 data-no-empty="true"