如何为下拉菜单选中项添加勾选标记并移除未选中项标记

明确需求：

• 默认状态下第一个下拉选项显示勾选标记
• 点击任意选项后，仅当前选中项保留勾选，其余选项的勾选标记移除

修改后的完整代码 #

HTML

<button onclick="dropdownCity()" class="dropbtnCity">ACTIVE</button>
<div id="myDropdownCity" class="dropdown-contentCity">
    <!-- 默认给第一个选项加上checked类 -->
    <a href="#myDropdownCity" class="a checked">ACTIVE</a>
    <a href="#myDropdownCity" class="b">ONE</a>
    <a href="#myDropdownCity" class="c">TWO</a>
    <a href="#myDropdownCity" class="d">THREE</a>
</div>

JavaScript

function dropdownCity() {
    document.getElementById("myDropdownCity").classList.toggle("showCity");
}
window.addEventListener('click', function(event) {
    if (event.target.matches('#myDropdownCity a')) {
        myDropdownCity.classList.remove('showCity');
        // 先移除所有选项的checked类，清除旧勾选
        const allOptions = document.querySelectorAll('#myDropdownCity a');
        allOptions.forEach(option => option.classList.remove('checked'));
        // 给当前点击的选项添加checked类，保留新勾选
        event.target.classList.add('checked');
        // 更新按钮显示文本
        document.querySelector('.dropbtnCity').innerText = event.target.innerText;
    }
})

CSS（保留原样式无需修改）

.checked::after {
    display: flex;
    justify-content: flex-end;
    content: "✓";
    margin-top: -13px;
}
.dropbtnCity {
    cursor: pointer;
    position: absolute;
    white-space: none;
    background-color: #FFFFFF;
    margin-left: 30px;
    height: 20px;
    border: none;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #303030;
}
.dropbtnCity:hover {
    background-color: #FFFFFF;
    transition: all ease 0.4s;
}
.dropdownCity {
    position: relative;
    display: inline-block;
}
.dropdown-contentCity {
    display: none;
    position: absolute;
    cursor: pointer;
    background-color: #FFFFFF;
    margin-top: 30px;
    padding: 10px;
    width: 197px;
    height: 164px;
    font-family: 'Inter';
    font-size: 14px;
    line-height: 14px;
    z-index: 1;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}
.dropdown-contentCity a {
    margin-top: -2.5px;
    color: #303030;
    padding: 15px;
    text-decoration: none;
    display: block;
    transition: all ease 0.2s;
}
.dropdown-contentCity a:hover {
    margin-top: -2.5px;
    background: #FAFAFA;
    color: #303030;
    padding: 15px;
    text-decoration: none;
    display: block;
}
.showCity {
    display:block;
}
.rectangle_container {
    margin-left: 135px;
}

修改说明 #

1. HTML部分：给第一个<a>标签添加checked类，直接实现默认勾选的初始状态。
2. JavaScript部分：
   • 点击选项时，先批量清除所有选项的checked类，确保只有当前选中项能保留勾选。
   • 修复了原代码中event.target.classList.add('checked').innerText的语法错误——classList.add()没有返回值，不能链式调用innerText，需拆分操作。

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