Javascript 使用jQuery突出显示所选选项

我正试图从下拉列表中突出显示所选的值，这很有效。。。但是，当您从列表中选择另一项时，该项也会高亮显示。当您选择其他项目时，它会不断添加到这些项目中。选择新的

时，如何将其从旧的

中删除？看看我的JSFIDLE。我知道我应该使用

if/else

语句，但不确定如何使用。

在添加类之前，在代码中添加这一行

$(this).find(".highlight").removeClass("highlight");

演示：

请参阅

---

首先从其他元素中删除该类

叉子：

第3行：

$('select option').removeClass('highlight');

---

如果您有多个

select

，则此代码可以重复使用：

$(function () {
    $('select').change(function () { //Can change the selector to you input class if you want, doesnt matter
        $(this).find('.highlight').removeClass('highlight');
        $(this).find('option:contains(' + $(this).val() + ')').addClass('highlight');
    })
})

小提琴：

或

$(function () {
    $('select').change(function () { //Can change the selector to you input class if you want, doesnt matter
        $(this).find('option:contains(' + $(this).val() + ')').addClass('highlight').siblings().removeClass('highlight');
    })
})

---

哇，谢谢大家的快速回复。如果你发布了一个好的、解释得很好的、相对简单的问题，人们通常会在几分钟内回答，最多<代码>：）太棒了！工作完美。但我很好奇为什么要先取消这个班？为什么不能在6号线上运行？我认为它的工作方式是添加类，然后删除它。想想看。。。如果先添加类，然后从所有选项中删除所有突出显示的类，则不会显示所选的类。你必须首先清除所有选项中的所有高亮显示类，然后只设置你想要的一个。啊。。。有道理。谢谢你@SpikeX。

$(function () {
    $('select').change(function () { //Can change the selector to you input class if you want, doesnt matter
        $(this).find('option:contains(' + $(this).val() + ')').addClass('highlight').siblings().removeClass('highlight');
    })
})