如何在选择框中添加带有字幕的文本

Question

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>

Answer 1

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
});