Javascript：更改标签中的 class 属性值

Question

我有一个 html 我想用 javascript function 更改一个 ZA2F2ED4F8EBC2CBB4C21A29 属性的值。

这是 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>

如何将此 class 的值更改为class="dropdown-item"

<button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>

我这样做了，但不确定这是正确的方法

var old_selected = document.getElementsByClassName("dropdown-item active").className = "dropdown-item";
console.log(old_selected);

Answer 1

const btn = document.querySelector(".dropdown-item")
btn.classList.remove('active')

这应该只适用于第一个按钮

正确的方法是获取所有按钮并删除所有活动 class

const btns = document.querySelectorAll(".dropdown-item")
btns.forEach(button => button.classList.remove('active'))

Answer 2

.dropdown-item和active类的按钮不止一个，您需要使用querySelectorAll并循环并设置className

document.querySelectorAll(".dropdown-item.active").forEach(button => button.className = "dropdown-item");

 document.querySelectorAll(".dropdown-item.active").forEach(button => button.className = "dropdown-item");

 .dropdown-item.active { background-color: red; color: white; }

 <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> How can I change value of this class to class="dropdown-item" <button class="dropdown-item active" data-dselect-value="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>