Question

I am working on some code, basically I have a form. On that form is a select option where I want users to select a font color.
I then need to append that option to an element on page, by adding the option they chose as a css class. Need to do this live.

So form element like so:

<select id="selectcolor" name="selectcolor" style="width: 200px;">
                        <option value="null">-- Select a Color ... --</option>
                        <option value="black">Black</option>
                        <option value="white">White</option>
                </select>

JS I made is:

//select text color
    $("#selectcolor").change(function(){
    var color = $(this).val();
    $(".selectcolor").css("color", 'color');

HTML to apply change to:

<div class="rightBottom selectcolor">Change this text<br />color</div>

Then in css I was gonna do:

.black {color:#000;}
.white {color:#fff;}

etc.

Basically, when user changes the select option, lets say to black, the class attribute changes text color to black on the div / span elements. Etc

Any suggestions please, I tried adding in select option values color:#000 etc but didnt work, I am guessing theres a couple of issues I am overlooking…

Thankyou in advance

Answer 1

$('#selectcolor').change(function() {
    var color = this.value || '';
    $('.selectcolor').attr('class', function(i, classes) {
        var cls = classes.split(/[\s]/);
        cls[2] = color;
        return cls.join(' ');
    });
});

DEMO