Bootstrap下拉框选中值异常：如何获取<a>标签内的播放列表ID

看起来你是把Bootstrap的下拉组件（Dropdown）当成了原生的<select>来处理，所以才会出现获取的值一直是0的情况——毕竟Bootstrap下拉框本质是用<ul>+<a>/<button>模拟的，不是原生表单控件，自然不能用select.value那套逻辑来拿值。

下面给你两种靠谱的解决方式，先看最常用的结构示例（假设你的下拉框代码大概是这样的）：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="playlistDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    选择目标播放列表
  </button>
  <ul class="dropdown-menu" aria-labelledby="playlistDropdown">
    <!-- 推荐用data属性存储播放列表ID，比直接放文本里更靠谱 -->
    <li><a class="dropdown-item" href="#" data-playlist-id="101">我的私藏歌单</a></li>
    <li><a class="dropdown-item" href="#" data-playlist-id="102">健身专用列表</a></li>
    <li><a class="dropdown-item" href="#" data-playlist-id="103">午休放松曲库</a></li>
  </ul>
</div>

方法一：事件委托（推荐，支持动态生成的下拉项） #

这种方式不用给每个<a>单独绑事件，只要给下拉菜单容器绑一次就行，不管后续有没有新增下拉项都能生效：

// 获取下拉菜单的容器元素
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownMenu.addEventListener('click', function(e) {
  // 阻止a标签默认的跳转行为
  e.preventDefault();
  
  // 确认点击的是下拉项
  if (e.target.classList.contains('dropdown-item')) {
    // 从data属性里取出播放列表ID
    const playlistId = e.target.getAttribute('data-playlist-id');
    
    // 这里就可以用拿到的ID发POST请求了
    fetch('/your-server-api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ playlistId: playlistId })
    })
    .then(res => res.json())
    .then(data => {
      console.log('请求成功，返回数据:', data);
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
  }
});

方法二：直接给每个下拉项绑定点击事件（适合静态下拉项） #

如果你的下拉项是固定不会动态添加的，也可以直接遍历所有<a>标签绑定事件：

// 获取所有下拉项元素
const dropdownItems = document.querySelectorAll('.dropdown-item');

dropdownItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    // 这里用this指代当前点击的a标签
    const playlistId = this.getAttribute('data-playlist-id');
    
    // 发送POST请求逻辑同上
    // ...
  });
});

为什么之前拿到的是0？ #

大概率是你误把Bootstrap下拉框当成了原生<select>，写了类似document.querySelector('select').value的代码，但实际上你的页面里根本没有<select>元素，或者那个select的默认值就是0，所以才会一直拿到0。以后遇到Bootstrap的组件，先看它的DOM结构，别用原生表单控件的逻辑去处理哦~

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