Как добавить текст с субтитрами в поле выбора

Question

Как добавить текст с субтитрами в поле выбора

Можно ли добавить заголовок и подзаголовок в поле выбора

<select name="sel_location_type" id="sel_location_type">
<option value="1">Factory/Warehouse <span class="subtitle">subtitle1</span></option>
<option value="2" selected>Residential <span class="subtitle">subtitle2</span></option>
<option value="3">Business (with loading dock) <span class="subtitle">subtitle3</span></option>
<option value="4">Business (needs liftgate) <span class="subtitle">subtitle4</span></option>
</select>

0

drop-down-menu jquery jquery-selectbox php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Да, это легко сделать с помощью библиотеки начальной загрузки. Увидеть документы

Вы можете использовать его, добавив следующие CDN и CSS на свою веб-страницу:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>

После добавления CDN ваш HTML будет выглядеть так:

<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
</select>

Под вашим HTML вы должны определить selectpicker Функция инициализации JS, такая как:

$('.selectpicker').selectpicker({
showSubtext:true
});

1