Javascript/jQuery - 从选项列表(下拉列表)添加类

Question

因此，我有一个过滤器列表，当单击它时，它应该向 img 添加一个类，因此当单击过滤器 brannan 时，它应该添加 class='brannan'对于img，选项和值与第一类相同。我如何知道addClass();到图像，例如，如果我选择过滤器brannan，它应该将类brannan添加到img中。

<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

 <div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>

我假设代码将遵循类似 onchange 的选择 -> 获取它的值 -> addClass();

Answer 1

使用 addClass() 添加类功能于 change()事件。还可以使用 removeClass 删除该类

$("select[name='[filter]'").on('change',function(){
  var prevClass = $('img').attr('class');
  $('img').removeClass(prevClass);
  $('img').addClass($(this).val());
}); 

<div class="form__field">
        <img id="preview" src="#" alt="Image preview" />
</div>

 <div class="form__field">    
        <select name="filter">
            <option value="_1977">1977</option>
            <option value="aden">aden</option>
            <option value="brannan">brannan</option>
            <option value="brooklyn">brooklyn</option>
            <option value="clarendon">clarendon</option>
        </select>