Bootstarp 可搜索选择选项

Question

使用引导选择时，选择选项不起作用。

$(function() {
  $('.selectpicker').selectpicker();
});

.sc_table {
  height: 100vh;
  overflow: scroll;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

使用引导选择时，选择选项不起作用。

Answer 1

您遇到的

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>

Bootstarp 可搜索选择选项

问题描述投票：0回答：1

1个回答

最新问题

Bootstarp 可搜索选择选项

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1