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 类这两个css属性：

height: 300px;
overflow-y: auto;

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

1 个答案: