这是一个用jQuery和Bootstrap 5构建的漂亮而花哨的多列下拉选择插件。

当触发时，多列下拉选择将显示在Bootstrap 5模式窗口中。用户可以输入一个值或搜索查询，该查询将筛选所有列中的值。完成搜索后，下拉列表中只显示匹配的值。

如何使用它:

1.在文档中加载所需的jQuery库和Bootstrap 5框架。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2.创建一个按钮来触发多列下拉选择。

<button type="button" id="btnLanguage" class="btn btn-primary">
  Select a Language
</button>

3.创建一个输入字段来存储用户选择。

<input type="text" id="selectedLanguage" class="form-control" placeholder="Language..." aria-label="Language">

4.为选项准备数据（一组对象）。

const AVAILABLE_LANGUAGES = [
  { code: "af", name: "Afrikaans"},
  { code: "sq", name: "Albanian"},
  { code: "ar", name: "Arabic"},
  // ...
];

5.初始化插件并用您刚才提供的数据填充下拉选择。

$( '#btnLanguage' ).bhDropdownSelect({ 
  source: AVAILABLE_LANGUAGES,
  selectCallback: selectLanguage,
}).
 
// store the selected value in the input field
function selectLanguage( params ) {
  $( '#selectedLanguage' ).val( `${params[0]}, ${params[1]}` );
};

6.设定主题。默认值：“安全”。

$( '#btnLanguage' ).bhDropdownSelect({ 
  source: AVAILABLE_LANGUAGES,
  selectCallback: selectLanguage,
  theme: 'eyesore' 
}).

7.或者在CSS中创建自己的主题。

.dropdown-select.mytheme .modal-header { background-color: #adbcce; }
 
.dropdown-select.mytheme .modal-header input[type="text"] {
  background-color: #d5dce5;
}
 
.dropdown-select.mytheme .modal-body { background-color: #879ebc; }
 
.dropdown-select.mytheme .modal-body .container .row:nth-child( odd ) {
  background-color: #9fc5f7;
}
 
.dropdown-select.mytheme .modal-body .container .row:nth-child( even ) {
  background-color: #3b87ec;
}
 
.dropdown-select.mytheme .item-highlight { 
  background-color: #c1d8f5; 
  font-style: italic;
  font-weight: bold;
}
 
.dropdown-select.mytheme .item-normal { 
  font-style: normal; 
  font-weight: normal;
} 

$( '#btnLanguage' ).bhDropdownSelect({ 
  source: AVAILABLE_LANGUAGES,
  selectCallback: selectLanguage,
  theme: 'mytheme' 
}).

预览截图

带jQuery和Bootstrap 多列下拉选择5