jQuery addClass 使用输入选择答案

【问题标题】：jQuery addClass using input selectjQuery addClass 使用输入选择
【发布时间】：2011-08-19 02:39:44
【问题描述】：

我是一个 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>

【问题讨论】：

标签： forms select addclass

【解决方案1】：

你可以使用“.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());
});

【讨论】：

【解决方案2】：

'rudeovski ze bear'说的，但是如果你还想把它设置为div的class到被选元素的id，这里就是。

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

【讨论】：

【解决方案3】：

首先，您不必在选项中使用 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>

在 JS 上

    //Attach event handler to select element's onchange event
$('#SelectElement').bind("change",changeStyle);

    //The event handler
function changeStyle()
{
       //Set class to selected value
   $('#styledContent').class($('#SelectElement').val());
}

【讨论】：