如何在 Bootstrap 5 弹出窗口中的选择选项更改事件上触发弹出窗口？答案

【问题标题】：How to triggle popover on select option change event in Boostrap 5 popover?如何在 Bootstrap 5 弹出窗口中的选择选项更改事件上触发弹出窗口？
【发布时间】：2022-10-01 15:39:30
【问题描述】：

我有一个带有 4 个选项的选择框，当我单击选择选项，然后单击选择的更改事件时，会触发引导程序 5 弹出框动态。

小提琴：https://jsfiddle.net/mayursutariya93/qjeg5r9b/6/

HTML：

<select class=\"form-select\">
  <option selected disabled>All Locations</option>
  <option value=\"01\">001</option>
  <option value=\"02\">002</option>
  <option value=\"03\">003</option>
  <option value=\"04\">004</option>
</select>

基本上创建了一个选择选项框和弹出框。

<div class=\"about-location-list\">
  <a tabindex=\"0\" class=\"about-location-list-item\" role=\"button\" data-bs-toggle=\"popover\" data-bs-html=\"true\" data-bs-placement=\"right\" data-bs-trigger=\"focus\" data-bs-custom-class=\"custom-popover\" data-bs-title=\"Title 01\" data-bs-content=\'<span>Lorim ipsum 01</span>\'>Title 01</a>
  <a tabindex=\"1\" class=\"about-location-list-item\" role=\"button\" data-bs-toggle=\"popover\" data-bs-html=\"true\" data-bs-placement=\"right\" data-bs-trigger=\"focus\" data-bs-custom-class=\"custom-popover\" data-bs-title=\"Title 02\" data-bs-content=\'<span>Lorim ipsum 01</span>\'>Title 02</a>
  <a tabindex=\"2\" class=\"about-location-list-item\" role=\"button\" data-bs-toggle=\"popover\" data-bs-html=\"true\" data-bs-placement=\"right\" data-bs-trigger=\"focus\" data-bs-custom-class=\"custom-popover\" data-bs-title=\"Title 03\" data-bs-content=\'<span>Lorim ipsum 01</span>\'>Title 03</a>
  <a tabindex=\"3\" class=\"about-location-list-item\" role=\"button\" data-bs-toggle=\"popover\" data-bs-html=\"true\" data-bs-placement=\"right\" data-bs-trigger=\"focus\" data-bs-custom-class=\"custom-popover\" data-bs-title=\"Title 04\" data-bs-content=\'<span>Lorim ipsum 01</span>\'>Title 04</a>
</div>

JS：

const popoverTriggerList = document.querySelectorAll(\'[data-bs-toggle=\"popover\"]\')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

调用弹窗函数。

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

您要弹出哪个链接？我都做了。

以下是手动 show 弹出框的方法。

document.querySelector('.form-select').addEventListener('change', function() {
  var value = this.value
  console.log(value);

  var elem = document.querySelectorAll('.about-location-list a')[+value-1]
  const popover = bootstrap.Popover.getOrCreateInstance(elem)
  popover.show();
  // console.log("inner" + index + value);

})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.1/js/bootstrap.bundle.min.js"></script>


<select class="form-select">
  <option selected disabled>All Locations</option>
  <option value="01">001</option>
  <option value="02">002</option>
  <option value="03">003</option>
  <option value="04">004</option>
</select>


<div class="about-location-list">
  <a tabindex="0" class="about-location-list-item" role="button" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-custom-class="custom-popover" data-bs-title="Title 01" data-bs-content='<span>Lorim ipsum 01</span>'>Title 01</a>
  <a tabindex="1" class="about-location-list-item" role="button" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-custom-class="custom-popover" data-bs-title="Title 02" data-bs-content='<span>Lorim ipsum 01</span>'>Title 02</a>
  <a tabindex="2" class="about-location-list-item" role="button" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-custom-class="custom-popover" data-bs-title="Title 03" data-bs-content='<span>Lorim ipsum 01</span>'>Title 03</a>
  <a tabindex="3" class="about-location-list-item" role="button" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="right" data-bs-trigger="focus" data-bs-custom-class="custom-popover" data-bs-title="Title 04" data-bs-content='<span>Lorim ipsum 01</span>'>Title 04</a>
</div>

【讨论】：

我正在寻找仅在选择特定选项时可见的弹出框。例如，如果我选择第二个选项，则第二个弹出窗口可见，而不是其他选项。谢谢。