如何使用不区分大小写的下拉选择

Question

我有一个下拉菜单，其中包含 "Pediatrics" 这样的选项。我的页面正在接收 "pediatrics"（小写）形式的查询参数。

当我尝试将下拉菜单的 selection 设置为 Pediatrics 时，没有任何反应，因为下拉菜单中没有 pediatrics。

例如：

<div class="option" data-selectable="" data-value="Pediatrics">Pediatrics</div>

我正在尝试 select 使用此选项：

let myParamS = "pediatrics";

$("#specialization").data('selectize').setValue(myParamS);

=> 不会工作，因为我的下拉菜单有 "P"ediatrics 而不是 "p"ediatrics

有人知道设置这个的最佳方法是什么吗？

Answer 1

您可以通过不区分大小写的比较来遍历选项，并找到要设置的正确选项值。

let myParamS = "pediatrics";

const selectizeInput = $("#specialization").data('selectize');
// returns a dictionary of options with value as a key
const options = selectizeInput.options; 

// does case insensitive comparision to find the matching option
const getValue = (options, valueToFind) => Object.keys(options)
.find(key => key.toLowerCase() === valueToFind.toLowerCase());

// set value
selectizeInput.setValue(getValue(options, myParamS));

如何使用不区分大小写的下拉选择

How to use case insensitive dropdown selectize

javascript

jquery

selectize.js