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

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

1 个答案: