Question

Using jquery, I need to set the class of a div using a select list.

For instance:

<select name="id[3]" id="id[3]">
<option value="11">- Please Select -</option>
<option value="16">Something</option>
<option value="15">Something else</option>
<option value="13">Etc...</option>
</select>

And this is the div that needs the class to be updated:

<div id="textpreview" class="textpreview"></div>

I have tried this code but I’m afraid my understanding of jquery is lacking:

$('#id\\[3\\]').change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});

if (str==16){
$("#textpreview").attr('class', 'sixteen');
}

})
.trigger('change');

Any ideas?

Answer 1

var $textpreview = $("#textpreview");

$('#id\\[3\\]').change(function() {
    var val = $(this).val();

    if (val == 16)
        $textpreview.addClass('sixteen');
    else
        $textpreview.removeClass('sixteen');
});