select下拉框中option标签disabled属性的作用及异常排查

问题场景 #

我实现了一个评分筛选下拉框，逻辑如下：

• 选中五星（★★★★★）选项时，JS捕获change事件，给该option添加disabled属性并生成对应的筛选横幅
• 删除横幅时，移除该option的disabled属性并删除横幅

但按以下步骤操作时出现异常：

1. 选择五星选项
2. 删除五星对应的横幅
3. 重新选择五星选项 → 无法触发选中逻辑（看起来选不中），但选择其他评分选项正常

代码示例 #

HTML

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">        
</head>

<div class="col-md-6">
            <select class="form-select mb-3 ratings-dropdown" id="ratings-dropdown" onchange="handleRatingChange(this)">
                <option selected disabled>Ratings</option>
                <option style="color: #ffc107" value="★★★★★">★★★★★</option>
                <option style="color: #ffc107" value="★★★★☆">★★★★☆</option>
                <option style="color: #ffc107" value="★★★☆☆">★★★☆☆</option>
                <option style="color: #ffc107" value="★★☆☆☆">★★☆☆☆</option>
                <option style="color: #ffc107" value="★☆☆☆☆">★☆☆☆☆</option>
            </select>
        </div>

<div class="row mt-2 mb-2"  id="filters-applied">
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

CSS

/* FILTERS */
option:disabled {
    background-color: #c8c8c8 !important;
}

JavaScript

function handleRatingChange(selectElement) {
    createBannerFilter("Ratings", selectElement, "ratings-dropdown");
}
function createBannerFilter(prefix, bannerValue, dropdownId){
    toggleOption(bannerValue.value, dropdownId, true);

    var banner = document.createElement("div");
    banner.classList.add("badge", "bg-secondary", "m-2", "fs-6", "d-flex", "align-items-center");
    banner.style.width = "auto";
    banner.style.fontWeight = "400";
    if("Ratings" === prefix){ 
        banner.innerHTML = prefix + " : " + "<span style='color: #ffc107'>" + bannerValue.value + "</span>";
    }else{
        banner.textContent = prefix + " : " + bannerValue.value;
    }
    var closeButton = document.createElement("button");
    closeButton.classList.add("btn", "p-0", "border-0", "ms-2");
    closeButton.setAttribute("type", "button");
    closeButton.setAttribute("aria-label", "Close");
    closeButton.innerHTML = '<span class="fs-6 d-flex justify-content-center align-items-center" aria-hidden="true">❌</span>';
    closeButton.addEventListener("click", function() {
        banner.remove();
        toggleOption(bannerValue.value, dropdownId, false);
    });
    banner.appendChild(closeButton);
    document.getElementById("filters-applied").appendChild(banner);
}

function toggleOption(value, dropdownId, toggle) {
    var dropdown = document.getElementById(dropdownId);
    var options = dropdown.options;
    for (var i = 0; i < options.length; i++) {
        if (options[i].value === value) {
            if(toggle){
                options[i].disabled = true
            }else{
                options[i].removeAttribute("disabled");
            }
        }
    }
}

问题原因 #

核心是select的选中状态与disabled属性的交互逻辑：

1. 选中五星并禁用它时，该option虽然被标记为disabled，但仍然是select的selected选项
2. 删除横幅解禁后，select的选中状态依然停留在五星选项上
3. 此时再次点击五星选项，浏览器认为它已经是选中状态，不会触发change事件，导致你的handleRatingChange函数不执行，看起来就是“无法选中”

解决方案 #

在删除横幅的同时，把select的选中状态重置到默认的占位选项（即第一个selected disabled的"Ratings"选项）。修改关闭按钮的点击事件逻辑：

closeButton.addEventListener("click", function() {
    banner.remove();
    toggleOption(bannerValue.value, dropdownId, false);
    // 重置select到默认选项
    const dropdown = document.getElementById(dropdownId);
    dropdown.selectedIndex = 0;
});

或者也可以在禁用option的时候就主动重置选中状态（在createBannerFilter函数中调用toggleOption之后添加）：

const dropdown = document.getElementById(dropdownId);
dropdown.selectedIndex = 0;

这样修改后，删除横幅时select会回到初始状态，再次点击五星选项就能正常触发change事件，重新生成筛选横幅了。

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