您遇到的
bootstrap-select
无法正常工作的问题可能是由于 Bootstrap 5 的 兼容性 问题。 您使用的 bootstrap-select
版本可能与 Bootstrap 5 不完全兼容。要解决此问题,您可以尝试使用与 Bootstrap 5兼容的
bootstrap-select
版本,例如版本 1.14.0-beta2
或 later。
$(function() {
$('.selectpicker').selectpicker();
});
.sc_table {
height: 100vh;
overflow: scroll;
}
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Include Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Include Bootstrap-Select CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet">
<!-- Include Bootstrap-Select JS (compatible version with Bootstrap 5) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
<body>
<div>
<center>
<h2>Transaction Creation</h2>
</center>
</div>
<div class="container-fluid p-2 sc_table b-5">
<form action="" method="post">
<div class="mb-3">
<label for="FromACC" class="form-label" data-toggle="tooltip" data-placement="bottom" title="Cash/Bank when money goes out, interest account when need to process income as interest">Credit Account</label>
<select id='FromACC' name='frmac' class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-tokens="dummy" value="0" selected>Select Account</option>
<option data-tokens="13000013 - CashBank" value="13">13000013 - CashBank</option>
<option data-tokens="202311433 - Interest Account" value="33">202311433 - Interest Account</option>
<option data-tokens="202311934 - IIA" value="34">202311934 - IIA</option>
<option data-tokens="202311735 - IEA" value="35">202311735 - IEA</option>
<option data-tokens="13001313 - Cash" value="36">13001313 - Cash</option>
<option data-tokens="13130013 - Bank" value="53">13130013 - Bank</option>
</select>
</div>
<button type="submit" name="tran_submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>