phpjquerydrop-down-menujquery-selectbox

How to add text with subtitle in select box

Is it possible to add title and sub title in a select box

<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>
Solution

  • Yes it is easily possible using bootstrap select library. See docs

    You can use it by adding the below css and js CDNs in your webpage, :

    <!-- 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>

    Once the CDN is added, your HTML will look like:

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

    Beneath your HTML you have to have to define the selectpicker initialization JS function like:

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