点击按钮获取ID后，如何查找对应属性值的标签并修改className？

点击带有onclick="myFunc(this.id)"的按钮（示例ID为1106）后，需要在HTML中找到data-dselect-value属性值与该ID相等的<button>标签，将其类名从dropdown-item修改为dropdown-item active，同时移除其他同类标签的active类。

相关HTML结构：

<select name="client" class="select form-select" id="id_client" style="display : none "> 
    <option value="1109">Charles</option> 
    <option value="1108">Fred</option> 
    <option value="1107">Lionel</option> 
    <option value="1106">Robert</option> 
    <option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
    <button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Charles
    </button>
    <div class="dropdown-menu">
      <div class="d-flex flex-column">
        <input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
        <div class="dselect-items" style="max-height:360px;overflow:auto">
          <button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
          <button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
          <button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
          <button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
          <button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
        </div>
        <div class="dselect-no-results d-none">No results found</div>
      </div>
    </div>
  </div>

初始JS函数：

function myFunc(clicked_id){
    }; 

可以通过以下步骤实现需求：

• 使用属性选择器定位目标元素：通过document.querySelector结合[data-dselect-value="${clicked_id}"]找到匹配的按钮
• 先移除所有dropdown-item标签的active类，避免多个元素同时处于激活状态
• 给目标元素添加active类

完整的myFunc函数代码：

function myFunc(clicked_id) {
    // 1. 获取所有dropdown-item元素
    const allDropdownItems = document.querySelectorAll('.dropdown-item');
    // 2. 移除每个元素的active类
    allDropdownItems.forEach(item => {
        item.classList.remove('active');
    });
    // 3. 定位目标元素
    const targetItem = document.querySelector(`[data-dselect-value="${clicked_id}"]`);
    // 4. 给目标元素添加active类
    if (targetItem) {
        targetItem.classList.add('active');
        // 可选：同步更新顶部的选中显示文本
        const selectButton = document.querySelector('.dselect-wrapper .form-select');
        if (selectButton) {
            selectButton.textContent = targetItem.textContent;
            selectButton.setAttribute('data-dselect-text', targetItem.textContent);
        }
        // 可选：同步更新原生select的选中值
        const nativeSelect = document.getElementById('id_client');
        if (nativeSelect) {
            nativeSelect.value = clicked_id;
        }
    }
}

代码说明 #

1. 移除所有active类：确保只有当前选中的元素处于激活状态，避免界面混乱
2. 定位目标元素：利用属性选择器精准匹配data-dselect-value等于clicked_id的按钮
3. 可选同步操作：如果需要同步更新下拉框顶部的显示文本和原生<select>的选中值，可以添加注释中的代码，保持界面和表单数据一致

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