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

Background color change from dropdown using javascript

本文关键字：背景 颜色 javascript 下拉列表 使用      更新时间：2023-09-26

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

<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 中，所以如果我选择红色并刷新页面，它仍然是红色的。

这是一个使用 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 插件

使用此代码设置 cookie

$.cookie("defaultColor",color);

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

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

检查小提琴

相关文章：