jquery - 从选择选项更改字体颜色

Question

我正在编写一些代码，基本上我有一个表单。该表单上有一个选择选项，我希望用户在其中选择字体颜色。 然后，我需要通过添加他们选择的选项作为 css 类，将该选项附加到页面上的元素。需要实时执行此操作。

因此表单元素如下所示:

<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是:

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

将更改应用到的 HTML:

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

然后在CSS中我要做的:

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

等等

基本上，当用户更改选择选项(例如更改为黑色)时，class 属性会将 div/span 元素上的文本颜色更改为黑色。等等

请提出任何建议，我尝试添加选择选项值 color:#000 等，但没有成功，我猜有几个我忽略的问题...

提前谢谢

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