Fork me on Gitee

Bootstrap Select 选择下拉框

当选项过多时,使用下拉菜单展示并选择内容。

实现思路:

前台设置使用 select 初始化,组件内部将 select 替换为菜单项 dropdown-menu,使用 input 代替 select

转换前代码:

    <input class="form-control" data-toggle="lgbSelect" />
    <select id="test" data-toggle="lgbSelect" class="d-none">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
    </select>

转换后代码:

    <div data-toggle="lgbSelect" class="form-select dropdown">
        <input type="hidden" data-toggle="lgbSelect" data-text="北京" value="1" id="test">
        <input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" placeholder="请选择 ...">
        <span class="form-select-append"><i class="fa fa-angle-up"></i></span>
        <div class="dropdown-menu-arrow"></div>
        <div class="dropdown-menu">
            <a class="dropdown-item active" href="#" data-val="1">北京</a>
            <a class="dropdown-item" href="#" data-val="2">上海</a>
            <a class="dropdown-item" href="#" data-val="3">深圳</a>
        </div>
    </div>

特色:配合 ASP.NET Core Razor 引擎初始化下拉框组件后,客户端取值与赋值均由 input 来承担,非常方便

取值代码:$('#test').val() 或者 $('#text').attr('value')

取文本代码:$('#text').attr('data-text')

赋值代码:$('#test').lgbSelect('val', 1)

select 标签前面的 input 控件为可选项,用途是页面呈现时占位所用,防止网速慢的情况下脚本更改页面元素时出现控件变换情况

基本用法

适用广泛的基础单选

$('#test').lgbSelect();
$('#test8').lgbSelect('reset', [{ value: 1, text: '上海', selected: true }]);

禁用状态

选择器不可用状态

$('#test1').lgbSelect('disabled');

自定义边框

可以自定义边框颜色

$('#test2').lgbSelect({ borderClass: 'border-primary' });
$('#test3').lgbSelect({ borderClass: 'border-info' });
$('#test4').lgbSelect({ borderClass: 'border-success' });
$('#test5').lgbSelect({ borderClass: 'border-warning' });
$('#test6').lgbSelect({ borderClass: 'border-danger' });
$('#test7').lgbSelect({ borderClass: 'border-secondary' });

Select Optons

组件选项

参数 说明 类型 可选值 默认值
placeholder 占位符 string - 请选择 ...
borderClass 边框样式 string border-primary/border-success/border-info/border-warning/border-danger null
更多属性请 Issues 页面提出

Events

组件事件

事件 说明 示例
changed.lgbSelect 下拉框值变化时触发此事件 $('#test').on('changed.lgbSelect', function (e) { })
更多事件请 Issues 页面提出

Methods

组件方法

方法名 说明 示例
val() 获取下拉框值 $('#test').val()
attr('data-text') 获取下拉框文本显示值 $('#test').attr('data-text')
lgbSelect('val', 1) 设置下拉框值 $('#test').lgbSelect('val', 1)
lgbSelect('disabled') 设置组件不可用 $('#test').lgbSelect('disabled')
lgbSelect('enable') 设置组件可用 $('#test').lgbSelect('enable')
lgbSelect('reset', val, init) 重置组件子项 $('#test').lgbSelect('reset', [ { value: 1, text: '上海', selected: true } ], false)
lgbSelect('get', function) 获取所有控件数据项 $('#test').lgbSelect('get', function (source) { data = source; })
更多方法请 Issues 页面提出