Forms 使用输入选择的jqueryaddclass

我有点像jQuery新手

我在下拉菜单中有5个选项。 我想根据选择的选项在div中添加一个类。 然后，该类将使用CSS更改内容的布局

这里有一个例子，如果它有帮助

谢谢

<form>

<select>
<option id="1">layout 1</option>
<option id="2">layout 2</option>
<option id="3" selected>layout 3</option>
<option id="4">layout 4</option>
<option id="5">layout 5</option>
</select>

<div class="3">styled content</div>

</form>

布局1
布局2
布局3
布局4
布局5
样式化内容

首先，您不必在选项中使用id。将值放入

value

属性中。将ID放入div并选择，以便可以使用jQuery选择它们

<form>

<select Id="selectElement">
<option value="1">layout 1</option>
<option value="2">layout 2</option>
<option value="3" selected>layout 3</option>
<option value="4">layout 4</option>
<option value="5">layout 5</option>
</select>

<div id="styledContent" class="3">styled content</div>

</form>

可以使用“.attr（）”设置div onchange的class属性。 您最好先将选项id更改为value。然后：

$("select").change(function() {
   $("div").attr("class", $(this).val());
});

（编辑）将其更改为：

$("select#np_blog_layout").change(function() {
   $("div#changebox").attr("class", $(this).val());
});

---

“rudeovski ze bear”说了什么，但是如果您仍然希望将其设置为div的类，并将其设置为所选元素id，那么就在这里

$('select').change(function() {
    $('div').attr('class', $(this).attr('id'));
});

$('select').change(function() {
    $('div').attr('class', $(this).attr('id'));
});