Div css change when select option is selected with

2019-08-10 07:12发布

站内文章 / jQuery

30 0

该账号已被封号

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have come close to the answer but I am not good enough at jQuery to tweak it to get it the way I want.

I need to change the css class of a div when a select option is selected.
So if the code was:

<style>
  .red{
  background-color:red;
}
  .green{
  background-color:green;
}
  .blue{
  background-color:blue;
}
</style>

<html>

<div id="box"> </div>

<select>
  <option value=1>Red</option>
  <option value=2>Green</option>
  <option value=3>Blue</option>
</select>

</html>

How would I go about changing the background colour of "#box" when the appropriate option is selected?

THIS was so, so close. (Found here)

回答1:

$('select').change(function(){
    $('#box').removeClass('red green blue').addClass(
        $(this).find('option:selected').text().toLowerCase()
    );
})
.change();

Here's the fiddle: http://jsfiddle.net/aHYKG/