使用javascript从下拉列表中更改背景颜色

Question

我希望能够通过从下拉菜单中进行选择来更改背景颜色。

<div id="background">
                <p><b>Choose a colour to change<br> background colour from the list.</b></p>
                    <select name="colour" id="background-change">
                        <option>Select One</option>
                        <option>Black</option> 
                        <option>Blue</option>
                        <option>Orange</option> 
                        <option>Red</option>
                        <option>White</option>
                        <option>Yellow</option>
                    </select> 
</div>

这就是我的 HTML 下拉代码和我需要更改背景的颜色。另外我想把它保存在cookie中，所以如果我选择红色并刷新页面，它仍然是红色的。

Answer 1

这是一个使用 jQuery 的解决方案

$(document).ready(function () {

//$("#background").css("background-color",$.cookie("defaultColor"));

    $("#background-change").change(function (event) {
      var color =  $(this).val();
       $("#background").css("background-color",color);

        //$.cookie("defaultColor",color);
    });
});

代码将根据下拉列表中的选定值更改背景。

要使用 jQuery 设置和检索 cookie，您必须使用 jQuery Cookie Plugin

使用此代码设置cookie

$.cookie("defaultColor",color);

然后使用此代码检索cookie并将其设置为背景颜色

$("#background").css("background-color",$.cookie("defaultColor"));

检查Fiddle