htmltwitter-bootstrapbootstrap-5html-select

Bootstrap searchable select option

The select option is not working when I am using bootstrap select.

$(function() {
  $('.selectpicker').selectpicker();
});
.sc_table {
  height: 100vh;
  overflow: scroll;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/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>

Solution

  • The issue you are facing with the bootstrap-select not working properly might be due to compatibility issues with Bootstrap 5. The version of bootstrap-select you are using may not be fully compatible with Bootstrap 5. To resolve this issue, you can try using a version of bootstrap-select that is compatible with Bootstrap 5, such as version 1.14.0-beta2 or later.

    $(function() {
  $('.selectpicker').selectpicker();
});
    .sc_table {
  height: 100vh;
  overflow: scroll;
}
    <!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- Include Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>