我有一个引导下拉菜单，有两个下拉项--“已完成”和“未完成”。当用户选择项目时，下拉菜单文本将设置为用户选择的任何项目。我希望下拉菜单的颜色也会根据所选项目进行更改。
如果用户选择“已完成”：class=“btn成功”。
如果用户选择“未完成”：class=“btn警告”。
这是我的html：

<div class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          -Select-
          <span class="caret"></span>
     </button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenu">
          <button class="dropdown-item" id="comp" type="button" data-value="Completed">Completed</button>
          <button class="dropdown-item" id="notcomp" type="button" data-value="Not Completed">Not Completed</button>
     </div>
</div>

以下是我尝试过的：

$(".dropdown-menu button").click(function () {
    var menuText = $(this).parents(".dropdown").find('.btn');
    var btnValue = $(this).data('value');

    menuText.html($(this).text() + '<span class="caret"></span>');
    menuText.val(btnValue);

    if (btnValue.contains("Completed")) {
        const div = document.querySelector("dropdown-toggle");

        if (div.classList.contains("btn-secondary")) {
            $(menuText).removeClass("btn-secondary").addClass("btn-success");
        }
        if (div.classList.contains("btn-warning")) {
            $(menuText).removeClass("btn-warning").addClass("btn-success");
        }
    }

    if (btnValue.contains("Not Completed")) {
        const div = document.querySelector("dropdown-toggle");

        if (div.classList.contains("btn-secondary")) {
            $(menuText).removeClass("btn-secondary").addClass("btn-warning");
        }
        if (div.classList.contains("btn-success")) {
            $(menuText).removeClass("btn-success").addClass("btn-warning");
        }
    }
});

我让queryselector（）返回“dropdown toggle”而不是“btn”，因为html的其余部分包含其他按钮，我希望避免返回它们。idk，如果这很重要，但只是一些背景。