Question

我正在尝试从下拉列表中突出显示所选值，但是当您从列表中选择另一个项目时，它也会突出显示。它会在您选择时继续添加到其他项目。如果选择新的<option>，如何将其从旧版<option>中删除？看看我的JSFiddle here。我知道我应该使用if/else语句，但不确定如何。

Answer 1

请参阅demo

var highlighted="";
$(function () {
    $('#places').change(function () {
        //if there is a previous selection, then remove highlight class
        if(highlighted!="")
            $('select option:contains(' + highlighted+ ')').removeClass('highlight')
        //store the current selection in temp var
        highlighted=$(this).val();
        $('select option:contains(' + $(this).val() + ')').addClass('highlight')
    })
})

Answer 2

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

福克：http://jsfiddle.net/CzuGF/

第3行：

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

Answer 3

此代码的工作方式类似于魅力，如果您有多个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');
    })
})

小提琴：http://jsfiddle.net/t4Vhd/5/

或

$(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'); }) })

Answer 4

在添加类之前，在代码中添加此行。

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

演示：http://jsfiddle.net/tymeJV/t4Vhd/2/

使用jQuery突出显示所选选项

4 个答案: