jquery - 如何在中间值选项中打开bootstrap select列表选择

Question

有没有办法默认 Bootstrap 下拉菜单，以便它们在值选项的中间打开？

当我点击“选择菜单”时，它默认从顶部值打开，如下所示 enter image description here

我希望它打开最流行的选项(5'0'' 到 6'2'')，如下所示:enter image description here

谁能帮我解决这个问题:)

Answer 1

最直接的选项之一就是设置您的首选值，例如 5'0" 作为所选选项:

<select>
    <!-- Omitted for brevity -->
    <option>4'10</option>
    <option>4'11</option>
    <option selected>5'0</option>
    <option>5'1</option>
    <option>5'2</option>
    <!-- Omitted for brevity -->
</select>

否则，您可以使用某种类型的实现来尝试通过 eq() 选择列表中的“中间”元素。功能:

// Attempt to resolve the middle element of your list
$('select option:eq(' + $('#select option').length / 2 + ')').prop('selected',true);
// Instantiate your select picker
$('select').selectpicker();

两者都是these examples can be seen here并在下面演示:

如果您想让用户更轻松一些，您可以考虑利用同一插件提供的一些功能，例如 live search允许用户开始输入以访问他们的选择。