javascript - 选择框: add value as class to div

Question

我有这个表格，访问者可以在其中选择字母类型；需要该 letterttype 的值才能将其添加为类；所以我们可以在样式表中设置它的样式来预览字体。

<p class="form-row form-row-wide addon-wrap-2094-lettertype-of-text">
<select class="addon addon-select" name="addon-2094-lettertype-of-   text">
<option value="">Select an option...</option>
<option data-price="" value="lucida-callygraphy-1" >Lucida Callygraphy</option>
<option data-price="" value="verdana-2" >Verdana</option>
<option data-price="" value="bakersville-old-face-3" >Bakersville Old Face</option>
</select>   
</p>    

我已经有一个 JavaScript

$('.addon-select').on('change', function() {
var selected = $(this).find('option:selected').val(); 
$('.product-addon-make-it-personal').addClass($(this).val());
}).change();

此 javascript 将值添加到 div .product-addon-make-it-personal；但有两个问题:

• 之前的类(class)没有被删除；里面还有其他类；所以我不能总共删除类
• 页面上有多个.addon-select；我可以使用上面 p 标签的 .addon-wrap-2094-lettertype-of-text 类来确保我在右侧选择框上触发吗？

Answer 1

尝试

$('.addon-select').on('change', function () {
    $(this).find('option').each(function () {
        $('.product-addon-make-it-personal').removeClass(this.value);
    });
    $('.product-addon-make-it-personal').addClass(this.value);
}).change();

<强> DEMO