Javascript 从选择列表选项更改CSS颜色

我试图改变css的基础上选择列表选项，我做错了什么？ 非常感谢您的帮助！（我无法更改HTML）

非常感谢

埃尔文

$（“选择”）.change（函数（）{
var color=$（“#5f01264e722ae”）.val（）；
$（“#sw#u poster_text2”）.css（“背景”，颜色）；
});
.sw\u海报\u文本2{
利润率：30像素；
背景：白色；
}

选择一个选项
黑色
棕色的
蓝色
我的名字
使用
$（this）.查找（'option:selected'）.data（'wapf-label'）
获取select的值，并使用
而不是
#
选择具有特定类的元素

var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);


$（“选择”）.change（函数（）{
var color=$（this）.find（'option:selected'）.data（'wapf-label'））
$（.sw_poster_text2”）.css（“背景”，颜色）；
});
.sw\u海报\u文本2{
利润率：30像素；
背景：白色；
}

选择一个选项
黑色
棕色的
蓝色
“我的名字”
您的选项值不是有效的颜色，您需要在样式设置后将有效颜色设置为。请尝试以下操作：

$("select").change(function() {
  var color = $("#5f01264e722ae").val();
  $("#sw_poster_text2").css("background", color);
});


选择一个选项
黑色
棕色的
蓝色
我的名字
您的选择没有id属性这在所需的OP上不起作用。你的回答不起作用。请查看您的答案。OP获得的颜色值不正确，无法使用。仅供参考。@AlwaysHelping注意，我得到的是一个数据属性，而不是值。请理解op有一些颜色作为值。所以我猜这就是他所说的颜色。@hev1非常感谢，这很有效！我的新手还有一个问题，如何将其插入到.php文件中的工作脚本中？我使用下面的脚本在图像上显示实时文本，现在我希望文本根据前面提到的其他选择字段更改颜色。jQuery（document）.ready（function（）{var fieldId=“5f0124e773aa8”；var defaultText=“My name”；if（！jQuery（'input[data field id=“”+fieldId+”）。length）return；var$el=jQuery（“”）.html（defaultText）；$el.appendTo（jQuery（'.woocommerce产品库--带图像'））；jQuery（document）.on（'change keyup'，'input[data field id=“'+fieldId+””），'function（）{var v=jQuery（this）.val（）| | defaultText；jQuery（'.sw poster_text2'）.html（v）；}）.trigger（'change'）；
.sw_poster_text2 {
  margin: 30px;
  background: white;
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">

  <select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
    <option value="">choose an option</option>
    <option value="black" data-wapf-label="black">black</option>
    <option value="brown" data-wapf-label="brown">brown</option>
    <option value="blue" data-wapf-label="blue">blue</option>
  </select>
</div>

<div class="sw_poster_text2">My name</div>