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

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>

Answer 1

是的，使用引导选择库很容易。见docs

您可以通过在您的网页中添加以下 css 和 js CDN 来使用它：

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