从“选择”中更改类

Question

我试图通过下拉列表中的值在div中追加一个类。我设法做到了，但是，上一个类仍然在div中，没有被替换

所以，与其

<div id="layoutblock" class="row one-column">

我得到了

<div id="layoutblock" class="row one-column two-columns three-columns">

这些课程是复合的

<select id="layout">
<option value="one-column">one-column</option>
<option value="two-columns">two-column</option>
<option value="three-columns">three-column</option>
</select>

<div id="layoutblock" class="row"></div>

JQuery

<script type="text/javascript">

$("#layout").change(function () {
  var str = "";
$("#layout option:selected").each(function () {
  str += $(this).val();   
  });
$('#layoutblock').removeClass($(this) str);
$('#layoutblock').toggleClass(str);
})
.change();

</script>

有什么想法吗，谢谢

问好

Answer 1

试试这个：

$("#layout").change(function () {
    $('#layoutblock')
        .removeClass()
        .addClass("row")
        .addClass($(this).val());
})
.change();

Answer 2

http://jsfiddle.net/tCWt7/1/

$(function () {
    $("#layout").change(function () {
        $('#layoutblock')[0].className = "row " + $(this).val();
    });
});

Answer 3

试试这段代码，

var oldVal = "";
$(function() {
    $("#layout").change(function () {
        if(oldVal) {
            $('#layoutblock').removeClass(oldVal);
        }
        $('#layoutblock').addClass($(this).val());
        oldVal = $(this).val(); //Update the old value   
    }).change(); 
 })

演示：http://jsfiddle.net/hwznY/