下拉列表的设计因元素过多而崩溃

Question

我已经下载了一个 JQuery 插件用于可搜索的下拉列表。这是 source

我使用 D3.js 填写列表。它适用于少数元素，但是当我想加载所有元素（大约 1200 个）时，设计崩溃并且列表显示在顶部，所以我看不到项目并且没有滚动条。

这是我加载整个元素时的样子：

这里通过浏览器中的开发者工具可以看到数据加载正确：

控制台显示这些违规行为：

这是我的 D3.js 代码：

d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
    if (error) throw error;

    d3.select("#my-select").selectAll(".option")
        .data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
        .enter().append("option")
        .text(function (d) { return d; })
        .attr("value", function (d) { return d; });
});

Html 脚本：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">


    <title> Crypto Trading Project</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/sol.css">


  </head>

  <body>

    <header>
      <div class="collapse bg-light" id="navbarHeader">
        <div class="container">
          <div class="row">
            <div class="col-sm-6 py-4">
                  <select id="my-select" name="Cryptos"  multiple="multiple"></select>
            </div>
            <div class="col-sm-6 py-4">
               From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
                 &nbsp;&nbsp;&nbsp;<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
            </div>
            <div class="col-sm-3 py-4">
            </div>
          </div>
        </div>
      </div>
      <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
        <a href="#">Cryptos VA</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </header>


    <main role="main">

    </main>

    <script src="js/jquery-3.3.1.min.js"></script>
       <script src="js/date-time-picker.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/sol.js"></script>


    <script type="text/javascript" src="js/d3.js"></script>
    <script type="text/javascript" src="js/loadsol.js"></script>

    <script type="text/javascript">

    $(function() {
        // initialize sol
      $('#my-select').searchableOptionList({
        showSelectAll: true
      });

     //dateTimePicker

       $('#J-demo-04').dateTimePicker({
          limitMax: $('#J-demo-05')
      });

      $('#J-demo-05').dateTimePicker({
          limitMin: $('#J-demo-04')
      });

    });
    </script>
  </body>
</html>

我怎样才能让它工作？

Answer 1

我终于想通了。这个想法很简单，固定活动容器的高度并添加一个滚动条。所以我将 sol.css 文件添加到 .sol-container.sol-active .sol-selection-container class 这两个 css 属性：

height: 300px;
overflow-y: auto;

下拉列表的设计因元素过多而崩溃

Drop-down list's design is crashed with too many elements

html-select

jquery-plugins

d3.js