從 select 列表選項更改 CSS 顏色

Question

我正在嘗試根據 select 列表選項更改 css ，我做錯了什么？ 非常感謝您的幫助！ （我無法更改 HTML）

非常感謝。

歐文

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

 .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="0z489" data-wapf-label="black">black </option> <option value="wu4xz" data-wapf-label="brown">brown </option> <option value="5k848" data-wapf-label="blue">blue </option> </select> </div> <div class="sw_poster_text2">My name</div>

Answer 1

使用$(this).find('option:selected').data('wapf-label')獲取 select 的值並使用. 而不是#到具有特定 class 的 select 元素。

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

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

 .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="0z489" data-wapf-label="black">black </option> <option value="wu4xz" data-wapf-label="brown">brown </option> <option value="5k848" data-wapf-label="blue">blue </option> </select> </div> <div class="sw_poster_text2">My name</div>

Answer 2

您的選項值不是有效顏色，您需要在樣式中設置有效顏色后嘗試以下操作：

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

.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>