jQuery addClass 使用输入选择

发布于 2024-11-30 08:51:40 字数 495 浏览 0 评论 0原文

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

原文

Im a bit of a jQuery novice.

I have 5 options in a drop down menu.
I want to add a class in a div depending on which option is selected.
This class will then change the layout of the content using CSS.

Here is an example if it helps!

Thanks

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落花浅忆 2024-12-07 08:51:40

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

You can use the ".attr()" to set the class attribute of the div onchange.
You're best to change the option id to value first. then:

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

(EDIT) Change it to:

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

回复收藏 0 原文

时光匆匆的小流年 2024-12-07 08:51:40

'rudeovski ze bear' 说的，但如果你仍然想将其设置为所选元素 id 的 div 类，这里就是。

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

What 'rudeovski ze bear' said, but if you still want to set it to the div's class to the selected elements id, here it is.

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

回复收藏 0 原文

送君千里 2024-12-07 08:51:40

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

First off, you don't have to use id to your options. Put the values in value attribute. Put ID to your div and select so you can select them using 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>

On 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());
}

回复收藏 0 原文

~没有更多了~