Bootstrap 如何在optgroup标签前添加图片

简介

在使用Bootstrap构建网页时，在选择组元素的标签前添加图片可能很有用。这可以帮助在选择元素中对选项进行视觉分组，使页面更方便用户使用。在这篇文章中，我们将讨论使用Bootstrap在optgroup元素的标签前添加图片。

什么是 “optgroup”

optgroup是一个HTML元素，它将选择元素中的相关选项分组。optgroup元素为选项组创建了一个标签，optgroup中的选项被缩进并在视觉上被分组。

语法

<select>
   <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
   </optgroup>
   <optgroup label="Group 2">
      <option>Option 3</option>
      <option>Option 4</option>
   </optgroup>
</select>

让我们通过一个带有代码的例子来更好地理解这一点。

例子

在这个例子中，我们将使用Bootstrap和HTML在optgroup元素的标签前添加一个图片。

第1步 – 使用文件浏览器在你的项目目录下创建一个index.html文件。

第2步 – 在HTML文件的head部分包含必要的元标签、脚本和样式。这包括指向Bootstrap CSS和JavaScript文件的链接，以及bootstrapselect库。

<meta charset="utf-8">
<meta name="viewport"
   content="width=device-width, initial-scale=1,
   shrink-to-fit=no">
   <script src=
   "https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

第3步– 接下来，我们创建一个类别为 “d-flex align-items-center “的div，它将被用来将选择元素居中。

<div class="d-flex align-items-center">

第4步– 在DIV内部，我们创建一个选择元素，其类别为 “selectpicker”。这个类是用来将Bootstrap的样式应用于选择元素的。

<select class="selectpicker">

第5步 – 在选择元素中，我们创建了两个optgroup元素。每个optgroup元素都有一个标签，其中包括一个图像。图像是用 “img “标签添加的，”src “属性被设置为图像的URL。标签文本是将显示在图像旁边的文本。在每个optgroup元素里面，我们有几个选项元素。这些是将在选择元素中显示的选项。

<optgroup label=
   "<img src='https://cdn-icons-png.flaticon.com/128/3085/3085330.png'> Type 1">
   <option value="one">Car 1</option>
   <option value="two">Car 2</option>
   <option value="three">Car 3</option>
</optgroup>

第6步 – 接下来，我们有一个包含JavaScript代码的脚本标签，用于处理选择元素显示时的事件。该脚本使用jQuery来选择选择元素中所有类别为 “dropdown-header “的元素。

<script>
   $('.selectpicker').on('shown.bs.select', function () {
   })
</script>

第7步– 在脚本内部，我们使用each()方法循环浏览所有下拉标题元素。我们检查该元素是否有 “data-unescaped “属性，其值为 “1” —

$('.bootstrap-select .dropdown-header').each(function () {
   if ((this.dataset.unescaped || '1') == '1' }

第8步 – 如果该元素的属性 “data-unescaped “的值为 “1”，我们将该元素的html设置为该元素的文本。

$('.bootstrap-select .dropdown-header').each(function () {
   if ((this.dataset.unescaped || '1') == '1') {
      let element = $(this);
      element.html(element.text());
      element.attr('data-unescaped', '0');
   }

第9步 – 有了这段代码，我们就可以使用Bootstrap在optgroup元素的标签前添加图片。

例子

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport"
   content="width=device-width, initial-scale=1,
   shrink-to-fit=no">
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> </script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"> </script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
   <style>
      .bootstrap-select img {
         width: 20px;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <div class="d-flex align-items-center">
      <select class="selectpicker">
         <optgroup label=
            "<img src='https://cdn-icons-png.flaticon.com/128/3085/3085330.png'> Type 1">
            <option value="one">Car 1</option>
            <option value="two">Car 2</option>
            <option value="three">Car 3</option>
         </optgroup>
         <optgroup label=
            "<img src='https://cdn-icons-png.flaticon.com/128/3202/3202926.png'> Type 2">
            <option value="4">Car 4</option>
            <option value="5"Car >5</option>
            <option value="6">Car 6</option>
         </optgroup>
      </select>
   </div>
   <script>
      ('.selectpicker').on('shown.bs.select', function () {('.bootstrap-select .dropdown-header').each(function () {
            if ((this.dataset.unescaped || '1') == '1') {
               let element = $(this);
               element.html(element.text());
               element.attr('data-unescaped', '0');
            }
         })
      })
   </script>
</body>
</html>

总结

在这篇文章中，我们讨论了使用Bootstrap在optgroup元素的标签前添加一个图片。我们首先介绍了什么是optgroup以及它的语法。然后，我们提供了一个包含代码片段的步骤指南，说明如何使用Bootstrap创建一个HTML文件并实现必要的脚本和样式，以便在optgroup元素的标签前显示一个图像。我们还演示了如何使用JavaScript处理事件。这种技术可以通过在选择元素中对选项进行视觉分组，使网页更方便用户使用。