Javascript 如何使用下拉菜单更改和保存车身颜色

我正在尝试使用下拉菜单中提供的选项更改主体颜色，并保存这些更改，以便用户刷新页面时，背景颜色将等于他们设置的颜色。但是，我在根据下拉菜单选项更改背景颜色时遇到问题

HTML

<button class="btn-secondmenu">Button</button>

<select name="colors" id="colors">
    <option value="red">Red</option>
    <option value="green" selected="selected">Green</option>
    <option value="yellow">Yellow</option>
    <option value="black">Black</option>
</select>

如有任何建议，将不胜感激，谢谢

您应该使用

$('.bdy').css('background-color', getColour);

如果是

body

标记，则最好使用：

$('body').css('background-color', getColour);

---

这里的事情过于复杂，您可以在下拉列表的

onchange

事件中通过使用

$（this.val（）

获取颜色来实现这一点

注意：

无需从localStorage中删除该项，然后将其重置，只需使用

.setItem（）

它将覆盖该项的值，如果您进行检查，您可以看到：

存储接口的

setItem（）

方法在传递密钥名称和值时，将将该密钥添加到存储，或更新该密钥的值（如果该密钥已经存在）

演示：

$（'select[name=“colors”]”）。更改（函数（）{
$（'.bdy'）.css（'background'，$（this.val（））；
//localStorage.setItem（'background'，$（this.val（））；
});

红色
绿色
黄色的
黑色
以下是简单易懂的完整工作解决方案：

您的HTML具有更好的命名：

    <button id="changeColorButton" class="btn-secondmenu">Button</button>


    <select name="colors" id="changeColorSelect">
            <option value="red">Red</option>
            <option value="green" selected="selected">Green</option>
            <option value="yellow">Yellow</option>
            <option value="black">Black</option>
    </select>

你可以在这里看到它的作用：（我可以做一行，但更难阅读）

有一个名为
getcolor
的变量很奇怪。通常应该为getter函数保留这个值，然后返回一个值。这看起来是一个很好的解决方案，而且它可能是唯一一个真正保存颜色更改的解决方案。@SterlingKing您能提供一个到演示/小提琴的链接吗？好的，颜色更改现在起作用了，但是当我刷新时它不会保存颜色。可能是因为代码被托管在fiddle上，而不是我自己的web主机上？
$('select[name="colors"]').change(function() {
  $('.bdy').css('background', $(this).val());
  localStorage.setItem('background', $(this).val());
});

    <button id="changeColorButton" class="btn-secondmenu">Button</button>


    <select name="colors" id="changeColorSelect">
            <option value="red">Red</option>
            <option value="green" selected="selected">Green</option>
            <option value="yellow">Yellow</option>
            <option value="black">Black</option>
    </select>

$('#changeColorButton').click(function() {
    var color = $('#changeColorSelect').val();
    $('body').css("background-color",color);
})