jquery - 从 Select 更改课程

Question

我正在尝试通过下拉列表中的值在 div 中附加一个类。我已经设法做到了，但是，以前的课程仍然在 div 中并且没有被替换

所以而不是得到

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

我越来越

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

课程正在复合

的HTML

<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

试试这个代码，

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/

Answer 2

尝试这个：

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

Answer 3

jsFiddle 演示

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

Answer 4

想试试

$("#layout").change(function () {
    $("#layoutblock").removeAttr("class");
    $("#layoutblock").attr("class", $("#layout option:selected").val()); 

    //Optional alert showing the new class of the div
    alert($("#layoutblock").attr("class"));
});

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

Answer 5

尝试这个

$("select option:not(:selected)").each(function () {    
var value  = $(this).val();
$("#layout").removeClass(value);
 $("#layout").addClass($('#layout :selected').val());
});