当选项过多时,使用下拉菜单展示并选择内容。
前台设置使用 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' });
组件选项
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
placeholder | 占位符 | string | - | 请选择 ... |
borderClass | 边框样式 | string | border-primary/border-success/border-info/border-warning/border-danger | null |
更多属性请 Issues 页面提出 |
组件事件
事件 | 说明 | 示例 | ||
---|---|---|---|---|
changed.lgbSelect | 下拉框值变化时触发此事件 | $('#test').on('changed.lgbSelect', function (e) { }) |
||
更多事件请 Issues 页面提出 |
组件方法
方法名 | 说明 | 示例 | ||
---|---|---|---|---|
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 页面提出 |