为什么我的选择器没有展开并显示其中的所有选项？
Why my selectpicker does not expand and display all the options within it?
我目前正在开发一个 Web 应用程序，该应用程序为用户提供上传 excel 文件的功能，该文件将读入 "dataframe"，然后根据用户的偏好进行过滤。要上传文件，我已包含 "Flask-Dropzone"。对于过滤器的配置，我实现了 "selectpicker" 以允许多选。 "selectpicker" 的 html 代码将从我的 python 代码生成，因为用户将指示要使用的过滤器数量，然后我们必须生成特定数量的过滤器供用户配置.其中一个选项是动态的，它会根据第一个 "selectpicker" 的选择而改变。 （这将在 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>
您似乎在代码中包含了两次 bootstrap 库：
<!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">
在我删除其中一个之后，您的所有选项似乎又出现了，看看这是不是您想要的。
我目前正在开发一个 Web 应用程序，该应用程序为用户提供上传 excel 文件的功能，该文件将读入 "dataframe"，然后根据用户的偏好进行过滤。要上传文件，我已包含 "Flask-Dropzone"。对于过滤器的配置，我实现了 "selectpicker" 以允许多选。 "selectpicker" 的 html 代码将从我的 python 代码生成，因为用户将指示要使用的过滤器数量，然后我们必须生成特定数量的过滤器供用户配置.其中一个选项是动态的，它会根据第一个 "selectpicker" 的选择而改变。 （这将在 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>
您似乎在代码中包含了两次 bootstrap 库：
<!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">
在我删除其中一个之后，您的所有选项似乎又出现了，看看这是不是您想要的。