Question

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

Answer 1

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

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

（编辑）将其更改为：

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

Answer 2

首先，您不必将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());
}

Answer 3

什么'rudeovski ze bear'说，但是如果你仍然想把它设置为div的类到选定的元素id，这里就是。

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

jQuery addClass使用输入选择

3 个答案: