Question

I have a dropdown list/menu and each option has a value. I would like that value to be passed to an element to determine the desired styling. Here is my raw html, hoping jquery is capable of doing this. The element that it needs to be passed too is called

 <div class="user-text">

So am hoping it can add a class like this per the value.

 <div class="user-text curveMeTop">

Here is my list with the values

 <div class="top15">
  <div class="label">Text Warp</div>
  <select name="warp-list">
    <option value="curveMeTop">Curve Top</option>
    <option value="curveMeBottom">Curve Bottom</option>
    <option value="wave">Wave</option>
    <option value="buldge">Buldge</option>
    <option value="skew">Skew</option>
  </select>
  </div>

Answer 1

Here you go:

$(function(){
    $('#warp-list').on('change', function() {
        $('div.user-text').attr('class', 'user-text ' + $(this).find('option:selected').val());
    });
});

See JSFiddle for example.

The reason why I’m setting the class via attr rather than addClass is otherwise you would keep adding additional classes each time you changed the drop-down selection. The alternative is trying to remove each and every class option first, or reset the class to nothing and then add in the ‘user-text’ class and also the class that you want added.