为什么我的选择器无法展开并显示其中的所有选项？

时间：2019-06-06 01:16:18

标签： javascript html bootstrap-4 bootstrap-selectpicker

我目前正在开发一个Web应用程序，该应用程序为用户提供了一个上传excel文件的功能，该文件将读入“数据框”，然后根据用户的喜好进行过滤。要上传文件，我已包含“ Flask-Dropzone”。对于过滤器的配置，我实现了“ selectpicker”以允许多选。 “ selectpicker”的html代码将从我的python代码生成，因为用户将指示要使用的过滤器数量，然后我们将生成特定数量的过滤器供用户配置。选项中的一个是动态的，它会根据第一个“选择器”上的选择而变化。 （这将在config_filter.html中的JS代码中解决），但是现在，我的“ selectpicker”并没有显示所有选项。当我查看源代码时，有选项，但是它没有显示在网页本身上。可能是什么问题呢？ 

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/basic.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <!-- Font Awesome --> 
        <title>Market Data Terminal Analysis</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/homepage">Revenue Analysis Report<a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/homepage">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/select_query_filter">Generate Report</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="nvDropdown_SQ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Standard Queries
        </a>
        <div class="dropdown-menu" aria-labelledby="nvDropdown_SQ">
          <a class="dropdown-item" href="#">Top 20 Declined Terminal Numbers</a>
          <a class="dropdown-item" href="#">Top 20 increased terminal numbers </a>
          <a class="dropdown-item" href="#">Customers with 0 terminal</a>
          <a class="dropdown-item" href="#">New Customers with > X terminals</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Update Records</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="nvDropdown_Import" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Import Data
        </a>
        <div class="dropdown-menu" aria-labelledby="nvDropdown_Import">
          <a class="dropdown-item" href="/upload_files">Transactions</a>
          <a class="dropdown-item" href="/add_product">Product Mapping</a>
          <a class="dropdown-item" href="/add_company">Company Mapping</a>
          <a class="dropdown-item" href="/add_country">Country Mapping</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
        <div class="container-fluid">

<body>
    <h1>Choose necessary columns and values to filter by:</h1>
    <form action="/add_filter_config" method="POST">



                    <select id="col1" name="col1" class="selectpicker" onchange="refreshList(event, 1);">




                        <option value="Product">Product</option> 

                        <option value="Price Category">Price Category</option> 

                        <option value="Firm Location">Firm Location</option> 

                        <option value="Customer Name">Customer Name</option> 

                        <option value="Customer Address">Customer Address</option> 

                        <option value="Customer Address(2)">Customer Address(2)</option> 

                        <option value="City">City</option> 

                        <option value="State">State</option> 

                        <option value="Zip">Zip</option> 

                        <option value="Country">Country</option> 

                        <option value="Change">Change</option> 

                        <option value="Change#">Change#</option> 

                        <option value="Change Date">Change Date</option> 

                        <option value="Terminal Count">Terminal Count</option> 

                        <option value="Billable">Billable</option> 

                        <option value="Bill Contact">Bill Contact</option> 

                        <option value="Phone#">Phone#</option> 

                        <option value="Email">Email</option> 

                        <option value="Source">Source</option> 

                        <option value="Reporting_Date">Reporting_Date</option> 

                        <option value="Channel">Channel</option> 




                    </select> <select id ="fil_mode1" name="fil_mode1" class="selectpicker" data-live-search="true">




                        <option value="exclude">exclude</option>

                        <option value="include">include</option>

                        <option value="less than and equal to">less than and equal to</option>

                        <option value="more than and equal to">more than and equal to</option>

                        <option value="between">between</option>




                    </select> <select id ="val1" name="val1" class="selectpicker" multiple data-live-search="true">




                        <option value="SBBO">SBBO</option> 

                        <option value="SCQ2">SCQ2</option> 

                        <option value="SG20">SG20</option> 

                        <option value="SIMX">SIMX</option> 

                        <option value="SINA">SINA</option> 

                        <option value="SING">SING</option> 




                    </select> <br><br>



        <input type="submit" value="Proceed to data mapping" formaction="/filter_records/column_mapping">
        <input type="submit" value="Summarize records" formaction="/filter_records/config_summary">
        <input type='hidden' id='no_of_filters' name="no_of_filters" value=1>
        <input type='hidden' id='source' name='source' value=>
    </form>
    <script>
        console.clear()

        function refreshList(event, i){


            var col_select = document.getElementById('col'.concat(i));
            var uv_select = document.getElementById('val'.concat(i));

            column = col_select.value;

            fetch('/col/' + column).then(function(response) {
                response.json().then(function(data) {
                    var optionHTML = ' ';
                    for (var uv of data.unique_val) {
                        optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
                    }
                    uv_select.innerHTML = optionHTML;
                    $('#val'.concat(i)).on('change', function() {
                        $('#val'.concat(i)).selectpicker('refresh');
                    });
                })
            });
        }
    </script>
</body>

        </div>
    </body>
</html>

1 个答案:

答案 0 :(得分：1)

似乎您在代码中两次包含了引导程序库：

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/basic.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <!-- Font Awesome --> 
        <title>Market Data Terminal Analysis</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/homepage">Revenue Analysis Report<a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/homepage">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/select_query_filter">Generate Report</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="nvDropdown_SQ" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Standard Queries
        </a>
        <div class="dropdown-menu" aria-labelledby="nvDropdown_SQ">
          <a class="dropdown-item" href="#">Top 20 Declined Terminal Numbers</a>
          <a class="dropdown-item" href="#">Top 20 increased terminal numbers </a>
          <a class="dropdown-item" href="#">Customers with 0 terminal</a>
          <a class="dropdown-item" href="#">New Customers with > X terminals</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Update Records</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="nvDropdown_Import" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Import Data
        </a>
        <div class="dropdown-menu" aria-labelledby="nvDropdown_Import">
          <a class="dropdown-item" href="/upload_files">Transactions</a>
          <a class="dropdown-item" href="/add_product">Product Mapping</a>
          <a class="dropdown-item" href="/add_company">Company Mapping</a>
          <a class="dropdown-item" href="/add_country">Country Mapping</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
        <div class="container-fluid">

<body>
    <h1>Choose necessary columns and values to filter by:</h1>
    <form action="/add_filter_config" method="POST">



                    <select id="col1" name="col1" class="selectpicker" onchange="refreshList(event, 1);">




                        <option value="Product">Product</option> 

                        <option value="Price Category">Price Category</option> 

                        <option value="Firm Location">Firm Location</option> 

                        <option value="Customer Name">Customer Name</option> 

                        <option value="Customer Address">Customer Address</option> 

                        <option value="Customer Address(2)">Customer Address(2)</option> 

                        <option value="City">City</option> 

                        <option value="State">State</option> 

                        <option value="Zip">Zip</option> 

                        <option value="Country">Country</option> 

                        <option value="Change">Change</option> 

                        <option value="Change#">Change#</option> 

                        <option value="Change Date">Change Date</option> 

                        <option value="Terminal Count">Terminal Count</option> 

                        <option value="Billable">Billable</option> 

                        <option value="Bill Contact">Bill Contact</option> 

                        <option value="Phone#">Phone#</option> 

                        <option value="Email">Email</option> 

                        <option value="Source">Source</option> 

                        <option value="Reporting_Date">Reporting_Date</option> 

                        <option value="Channel">Channel</option> 




                    </select> <select id ="fil_mode1" name="fil_mode1" class="selectpicker" data-live-search="true">




                        <option value="exclude">exclude</option>

                        <option value="include">include</option>

                        <option value="less than and equal to">less than and equal to</option>

                        <option value="more than and equal to">more than and equal to</option>

                        <option value="between">between</option>




                    </select> <select id ="val1" name="val1" class="selectpicker" multiple data-live-search="true">




                        <option value="SBBO">SBBO</option> 

                        <option value="SCQ2">SCQ2</option> 

                        <option value="SG20">SG20</option> 

                        <option value="SIMX">SIMX</option> 

                        <option value="SINA">SINA</option> 

                        <option value="SING">SING</option> 




                    </select> <br><br>



        <input type="submit" value="Proceed to data mapping" formaction="/filter_records/column_mapping">
        <input type="submit" value="Summarize records" formaction="/filter_records/config_summary">
        <input type='hidden' id='no_of_filters' name="no_of_filters" value=1>
        <input type='hidden' id='source' name='source' value=>
    </form>
    <script>
        console.clear()

        function refreshList(event, i){


            var col_select = document.getElementById('col'.concat(i));
            var uv_select = document.getElementById('val'.concat(i));

            column = col_select.value;

            fetch('/col/' + column).then(function(response) {
                response.json().then(function(data) {
                    var optionHTML = ' ';
                    for (var uv of data.unique_val) {
                        optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
                    }
                    uv_select.innerHTML = optionHTML;
                    $('#val'.concat(i)).on('change', function() {
                        $('#val'.concat(i)).selectpicker('refresh');
                    });
                })
            });
        }
    </script>
</body>

        </div>
    </body>
</html>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js">

删除其中一个后，似乎再次显示了所有选项，看看这是否是您想要的。

相关问题
最新问题