Remove a class select option is not selected

Question

Hello, When i select something from a selectbox it adds a class to the

selected option this way: $('div#tabs input[type="text"], select option:selected, input:checked, textarea').addClass('takethis'); But when i select a different option it doesn't remove the class 'takethis' from the option which I first selected. How can I force this?

Answer 1

You need to call removeClass on the previously selected item.

Answer 2

You could use removeClass like this:

$('#tabs').find('option').removeClass('takethis');

I am not sure what you are trying to do, though. This code:

$('div#tabs input[type="text"],
            select option:selected,
            input:checked,
            textarea').addClass('takethis');

Is grabbing all text fields, the selected option of all selects, all checked fields, and all textareas and adding the class takethis to it. Is that what you want to do?

EDIT I see what you're trying to do. If that is the case, why not just do this?

var table = $('<table>');
$('div#tabs :input').each(function() {
    var val = $.trim($(this).val());
    var name = $(this).attr('name');
    if(val) {
        var td1 = $('<td>').html(name);
        var td2 = $('<td>').html(val);
        $('<input>').attr({
            type: 'hidden',
            name: name
        }).appendTo(td2);
        $('<tr>').append(td1).append(td2).appendTo(table);
    }
});
$('#4tab').append(table);

Wouldn't this be simpler or am I missing a requirement here?

Answer 3

Remove class from all non-selected options:

$("select option:not(:selected)").removeClass("takethis");

Then add to selected one:

$("select option:selected").addClass("takethis");

Answer 4

The answer of seb works for me! Thanks all!