如何更新选择下拉列表的选项类？

Question

我正在尝试更新选择选项的类。例如，我想更新所选选项的类以添加cbp-filter-item-active。我可以看到浏览器正在进行数据过滤的更改。但是，问题是，在chrome选项类中，没有更新以将cbp-filter-item-active添加到所选选项中。

以下是我的HTML代码：

<select id="js-filters-lightbox-gallery1" class="cbp-l-filters-dropdown cbp-l-filters-dropdown-floated">
    <option value="*" data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</option>
    <option value=".identity" data-filter=".identity" class="cbp-filter-item">Identity</option>
    <option value=".web-design" data-filter=".web-design" class="cbp-filter-item">Web Design</option>
    <option value=".print" data-filter=".print" class="cbp-filter-item">Print</option>
</select>

这是我的剧本：

function myFunction() {
    var e = document.getElementById("js-filters-lightbox-gallery1");
    var rc = e.options[e.selectedIndex].dataset.filter;
    alert(rc)
}

Answer 1

从所有项中移除类

$("#js-filters-lightbox-gallery1>option.cbp-filter-item-active").removeClass("cbp-filter-item-active");

将类添加到所选项

$("#js-filters-lightbox-gallery1>option:selected").addClass("cbp-filter-item-active");