选择 MDB Pro组件

选择-Bootstrap 5和Material Design 2.0表格

选择字段组件用于从列表中收集用户提供的信息 选项。


基本例子


多选

multiple 属性添加到select元素以激活多种模式。


用标签选择

可以通过创建带有以下内容的元素来添加选择标签 .form-label .select-label 类。


使用占位符选择

使用 placeholder 选项设置选择输入的占位符。占位符将 输入为焦点且未选择任何选项时显示。


禁用选择

disabled 属性添加到select元素以禁用select输入。


禁用选项

在选项元素上使用 disabled 属性可禁用特定选项。


清除按钮

clearButton 选项设置为 true ,以显示允许 清除当前选择。


自订内容

将显示带有类 .select-custom-content 的自定义内容容器 在选择下拉列表的末尾。


可见选项

使用 visibleOptions 选项更改将显示的选项数量 在选择下拉列表中而不滚动。


次要文字

secondary-text 数据属性添加到特定选项以显示secondary 文本。



选项组

可以使用 optgroup 元素对选项进行分组。


用图标选择

icon 数据属性添加到特定选项以显示选项图标。


验证方式

validation 选项设置为 true 以启用组件验证。的 validFeedback invalidFeedback 选项允许修改 验证消息。


设定值

setValue 方法允许以编程方式设置组件选择。


单选

将单值字符串添加到参数列表以正确选择带有相应选项的选项 单选模式下的值。


多选

将字符串值数组添加到参数列表以正确选择带有 多重选择模式下的对应值。

选择 - API


用法

通过类


        <select class="select">
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
        </select>
      

通过JavaScript


        const mySelect = new mdb.Select(document.getElementById('mySelect'), options)
      

Options

Name Type Default Description
container String 'body' Container for the select dropdown
clearButton Boolean false Adds clear button to the select input
disabled Boolean false Changes select input state to disabled
displayedLabels Number 5 The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off.
filter Boolean false Displays filter input that allow to search for specific option
filterDebounce Number 300 Adds delay to the options list updates when using filter input. Improves performance of the select with filter.
formWhite Boolean false Adjust input colors for dark backgrounds.
invalidFeedback String Invalid The text which is displayed below the Material Select when the validate option is enabled and the select is invalid
noResultsText String 'No results found' The text that will be displayed when no option is found after using select filter
placeholder String - The text that will be displayed as select input placeholder
size String 'default' Changes input size. Available options: 'sm', 'lg', 'default'.
optionsSelectedLabel String 'options selected' The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected
optionHeight Number 48 Height of the select option. Used to determine dropdown height and number of visible options.
selectAll Boolean true Displays select all option in multiselect dropdown
selectAllLabel String 'Select all' Changes label of select all option.
searchPlaceholder String 'Search...' Changes placeholder of the select search input.
validation Boolean false Adds required validation to the component.
validFeedback String 'Valid' The text which is displayed below the Material Select when the validate option is enabled and the select is valid.
visibleOptions Number 5 The maximum number of options which are visible in the select dropdown without scrolling.

方法

Name Description Example
open Manually opens a select mySelect.open()
close Manually closes a select mySelect.close()
setValue Programatically set component selections. Add single value for default select and array of values for multiselect. mySelect.setValue('3')
dispose Disposes a select instance mySelect.dispose()

            const selectEl = document.getElementById('mySelect')
            const select = new mdb.Datepicker(selectEl)
            select.open()
          

大事记

Name Description
open.mdb.select This event fires immediately when the select is opened.
close.mdb.select This event fires immediately when the select is closed.
valueChange.mdb.select This event fires immediately when the select value changes.
optionSelect.mdb.select This event fires immediately when the select option is selected.
optionDeselect.mdb.select This event fires immediately when the select option is deselected.

            const mySelect = document.getElementById('mySelect')
            mySelect.addEventListener('open.mdb.select', (e) => {
              // do something...
            })
          

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Select } from 'mdb-ui-kit';