Bootstrap下拉菜单选择项切换时如何更换图片src？

当然可以实现这个功能，只需要通过自定义数据属性存储每个下拉选项对应的图片路径，再结合JavaScript监听下拉项的点击事件来更新图片的src属性即可，具体步骤如下：

1. 修改HTML结构，添加数据属性 #

给每个.dropdown-item添加data-img-src属性存储对应图片路径，同时给图片元素设置唯一ID方便JS定位：

<tr>
  <td class="bold text-primary">
    <div class="dropdown show">
      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Test
      </a>

      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#" data-img-src="img/website_building.jpg">1</a>
        <a class="dropdown-item" href="#" data-img-src="img/another_image1.jpg">2</a>
        <a class="dropdown-item" href="#" data-img-src="img/another_image2.jpg">3</a>
      </div>
    </div>
  </td>
  <td class="center-image icon">
    <img id="targetImage" src="img/website_building.jpg" rel="popover" class="highlight zoom img-thumbnail" width="300" alt="">
  </td>
</tr>

2. 添加JavaScript逻辑 #

原生JavaScript实现 #

// 获取所有下拉项和目标图片
const dropdownItems = document.querySelectorAll('.dropdown-item');
const targetImage = document.getElementById('targetImage');

// 绑定点击事件
dropdownItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    const imgSrc = this.getAttribute('data-img-src');
    if (imgSrc) {
      targetImage.src = imgSrc;
      // 可选：更新下拉按钮文本，显示当前选中项
      document.getElementById('dropdownMenuLink').textContent = this.textContent;
    }
  });
});

jQuery实现（项目已引入jQuery时使用） #

$('.dropdown-item').on('click', function(e) {
  e.preventDefault();
  const imgSrc = $(this).data('img-src');
  if (imgSrc) {
    $('#targetImage').attr('src', imgSrc);
    // 可选：更新下拉按钮文本
    $('#dropdownMenuLink').text($(this).text());
  }
});

注意事项 #

• 确保data-img-src中的图片路径与页面相对路径匹配，避免加载失败
• 若需处理图片加载异常，可给图片添加onerror事件设置兜底图片
• 更新下拉按钮文本属于可选优化，能提升用户对当前选中状态的感知

内容的提问来源于stack exchange，提问作者Jodynek