select选择器 - 仅在 select 中有更多选项时出错

Question

此脚本显示年月下拉菜单。

当点击它改变它的值时，这个错误出现在 Firefox 控制台，没有显示 select 中的选项：

Uncaught TypeError: A.selectpicker.current.data[(v + A.selectpicker.view.position0)] is undefined
    i bootstrap-select.js:1256
    createView bootstrap-select.js:1135
    setSize bootstrap-select.js:2045
    clickListener bootstrap-select.js:2341
    jQuery 8
    checkDisabled bootstrap-select.js:2293
    init bootstrap-select.js:932
    J bootstrap-select.js:832
    t bootstrap-select.js:3050
    jQuery 2
    Q bootstrap-select.js:3033
    <anonymous> bootstrap-select.js:3100
    jQuery 2
    <anonymous> bootstrap-select.js:3098
    jQuery 8
    <anonymous> bootstrap.min.js:6
    <anonymous> bootstrap.min.js:6 bootstrap-select.js:1256:18

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/js/bootstrap-select.min.js"></script>

<select class='form-control selectpicker' data-live-search='true' data-size='10' data-width='fit' class="select">
<option value="2018-01">2018-01</option>
<option value="2018-02">2018-02</option>
<option value="2018-03">2018-03</option>
<option value="2018-04">2018-04</option>
<option value="2018-05">2018-05</option>
<option value="2018-06">2018-06</option>
<option value="2018-07">2018-07</option>
<option value="2018-08">2018-08</option>
<option value="2018-09">2018-09</option>
<option value="2018-10">2018-10</option>
<option value="2018-11">2018-11</option>
<option value="2018-12">2018-12</option>
<option value="2019-01">2019-01</option>
<option value="2019-02">2019-02</option>
<option value="2019-03">2019-03</option>
<option value="2019-04">2019-04</option>
<option value="2019-05">2019-05</option>
<option value="2019-06">2019-06</option>
<option value="2019-07">2019-07</option>
<option value="2019-08">2019-08</option>
<option value="2019-09">2019-09</option>
<option value="2019-10">2019-10</option>
<option value="2019-11">2019-11</option>
<option value="2019-12">2019-12</option>
<option value="2020-01">2020-01</option>
<option value="2020-02">2020-02</option>
<option value="2020-03">2020-03</option>
<option value="2020-04">2020-04</option>
<option value="2020-05">2020-05</option>
<option value="2020-06">2020-06</option>
<option value="2020-07">2020-07</option>
<option value="2020-08">2020-08</option>
<option value="2020-09">2020-09</option>
<option value="2020-10">2020-10</option>
<option value="2020-11" selected="selected">2020-11</option>
<option value="2020-12">2020-12</option>
<option value="2021-01">2021-01</option>
<option value="2021-02">2021-02</option>
<option value="2021-03">2021-03</option>
<option value="2021-04">2021-04</option>
<option value="2021-05">2021-05</option>
<option value="2021-06">2021-06</option>
<option value="2021-07">2021-07</option>
<option value="2021-08">2021-08</option>
<option value="2021-09">2021-09</option>
<option value="2021-10">2021-10</option>
<option value="2021-11">2021-11</option>
<option value="2021-12">2021-12</option>
<option value="2022-01">2022-01</option>
<option value="2022-02">2022-02</option>
<option value="2022-03">2022-03</option>
<option value="2022-04">2022-04</option>
<option value="2022-05">2022-05</option>
<option value="2022-06">2022-06</option>
<option value="2022-07">2022-07</option>
<option value="2022-08">2022-08</option>
<option value="2022-09">2022-09</option>
<option value="2022-10">2022-10</option>
<option value="2022-11">2022-11</option>
<option value="2022-12">2022-12</option>
</select>

但是这个，相同但选项较少，有效：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.7/dist/js/bootstrap-select.min.js"></script>

<select class='form-control selectpicker' data-live-search='true' data-size='10' data-width='fit' class="select">
<option value="2018-01">2018-01</option>
<option value="2018-02">2018-02</option>
<option value="2018-03">2018-03</option>
<option value="2018-04">2018-04</option>
<option value="2018-05">2018-05</option>
<option value="2018-06">2018-06</option>
<option value="2018-07">2018-07</option>
<option value="2018-08">2018-08</option>
<option value="2018-09">2018-09</option>
<option value="2018-10">2018-10</option>
<option value="2018-11">2018-11</option>
<option value="2018-12">2018-12</option>
<option value="2019-01">2019-01</option>
<option value="2019-02">2019-02</option>
<option value="2019-03">2019-03</option>
<option value="2019-04">2019-04</option>
<option value="2019-05">2019-05</option>
<option value="2019-06">2019-06</option>
<option value="2019-07">2019-07</option>
<option value="2019-08">2019-08</option>
<option value="2019-09">2019-09</option>
<option value="2019-10">2019-10</option>
<option value="2019-11">2019-11</option>
<option value="2019-12">2019-12</option>
<option value="2020-01">2020-01</option>
<option value="2020-02">2020-02</option>
<option value="2020-03">2020-03</option>
<option value="2020-04">2020-04</option>
<option value="2020-05">2020-05</option>
<option value="2020-06">2020-06</option>
<option value="2020-07">2020-07</option>
<option value="2020-08">2020-08</option>
<option value="2020-09">2020-09</option>
<option value="2020-10">2020-10</option>
<option value="2020-11" selected="selected">2020-11</option>
<option value="2020-12">2020-12</option>
</select>

为什么？

如何让它发挥作用？

谢谢

Answer 1

这是一个已知错误，已在 bootstrap-select v1.13.8...

中修复

参见：https://github.com/snapappointments/bootstrap-select/issues/2231

正在将您的 CDN 导入更改为版本

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.8/dist/js/bootstrap-select.min.js"></script>

或更高版本将修复它。

或者，如果那是不可能的，启用 virtualScroll 也应该可以解决它。