Опция выбора с возможностью поиска в Bootstrap
Опция выбора не работает, когда я использую выбор начальной загрузки.
$(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>@mplungjan Я не вижу в этом атрибута для поиска
—
10.07.2024 15:04
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
2
50
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Проблема, с которой вы столкнулись, когда bootstrap-select не работает должным образом, может быть связана с проблемами совместимости с Bootstrap 5. Используемая вами версия bootstrap-select может быть не полностью совместима с Bootstrap 5. Чтобы решить эту проблему, вы можете попробовать использовать версию bootstrap-select который совместим с Bootstrap 5, например, версией 1.14.0-beta2 или новее.
$(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>Другие вопросы по теме
Премиум Fullcalendar не поддерживает тему Bootstrap5
Печать и предварительный просмотр веб-страницы не работают должным образом в браузере Microsoft Edge
Bootstrap 5 Carousel показывает увеличенное изображение при нажатии кнопки «Далее» или «Предыдущее», если карусель обернута CSS с плавающей запятой
Строка Bootstrap с фиксированной максимальной высотой по-прежнему занимает место при переполнении
CSS-классы верхнего ряда px-4 в проекте Blazor
Проблема с фильтром JavaScript со сворачиваемыми строками в шаблоне блейда Laravel
Как выровнять текст по логотипу в мобильном представлении с помощью Bootstrap 5?
Как я могу редактировать это раскрывающееся меню Bootstrap5?
Горизонтальная карта Bootstrap с телом карты, заполняющим вертикальное пространство и имеющим условную кнопку «расширитель» (подробнее)
Как расположить изображение рядом с текстовым вводом с помощью Bootstrap 5
Похожие вопросы
Div со строками разной высоты в HTML5
Проблема с заполнением при создании панели навигации
Плавная прокрутка к элементу div при нажатии на якорную ссылку
Изображение не загружается на HTML-странице при попытке изменить его с помощью метода GetElementByID
Как сделать так, чтобы фрагмент одновременно появлялся и выделялся красным?
CSS липкие карты с использованием сетки
<aside> или <section>: какой из них следует использовать для раздела библиографии/ссылки?
Создание пользовательского выбора во время выполнения
Как вставить разрыв строки в ::before элемента с помощью CSS и attr()
В UserCreationForm Django отображается только первый заполнитель
У BS5 есть свой выбор: getbootstrap.com/docs/5.0/forms/select