根据选择选项更改 div 背景颜色

Question

我需要根据在选择元素中选择的当前选项更改 div 元素的背景颜色（请参阅：https://www.neosileurope.nl/test/）

<select name="input_13" id="input_5_13" onchange="gf_apply_rules(5,[0]);" class="large gfield_select" tabindex="1" style="width: 100% !important;">
  <option value="---" selected="selected">---</option>
  <option value="RAL 1000 - Groenbeige">RAL 1000 - Groenbeige</option>
  <option value="RAL 1001 - Beige">RAL 1001 - Beige</option>
  <option value="RAL 1002 - Zandgeel">RAL 1002 - Zandgeel</option>
  <option value="RAL 1003 - Signaalgeel">RAL 1003 - Signaalgeel</option>
  <option value="RAL 1004 - Goudgeel">RAL 1004 - Goudgeel</option>
  <option value="RAL 1005 - Honinggeel">RAL 1005 - Honinggeel</option>
  <option value="RAL 1006 - Maisgeel">RAL 1006 - Maisgeel</option>
  <option value="RAL 1007 - Narcissengeel">RAL 1007 - Narcissengeel</option>
  <option value="RAL 1011 - Bruinbeige">RAL 1011 - Bruinbeige</option>
  <option value="RAL 1012 - Citroengeel">RAL 1012 - Citroengeel</option>
  <option value="RAL 1013 - Parelwit">RAL 1013 - Parelwit</option>
  <option value="RAL 1014 - Ivoorkleurig">RAL 1014 - Ivoorkleurig</option>
  <option value="RAL 1015 - Licht ivoorkleurig">RAL 1015 - Licht ivoorkleurig</option>
  <option value="RAL 1016 - Zwavelgeel">RAL 1016 - Zwavelgeel</option>
  <option value="RAL 1017 - Saffraangeel">RAL 1017 - Saffraangeel</option>
  <option value="RAL 1018 - Zinkgeel">RAL 1018 - Zinkgeel</option>
  <option value="RAL 1019 - Grijsbeige">RAL 1019 - Grijsbeige</option>
  <option value="RAL 1020 - Olijfgeel">RAL 1020 - Olijfgeel</option>
  <option value="RAL 1021 - Koolzaadgeel">RAL 1021 - Koolzaadgeel</option>
  <option value="RAL 1023 - Verkeersgeel">RAL 1023 - Verkeersgeel</option>
  <option value="RAL 1024 - Okergeel">RAL 1024 - Okergeel</option>
  <option value="RAL 1026 - Briljantgeel">RAL 1026 - Briljantgeel</option>
  <option value="RAL 1027 - Kerriegeel">RAL 1027 - Kerriegeel</option>
  <option value="RAL 1028 - Meloengeel">RAL 1028 - Meloengeel</option>
  <option value="RAL 1032 - Bremgeel">RAL 1032 - Bremgeel</option>
  <option value="RAL 1033 - Dahliageel">RAL 1033 - Dahliageel</option>
  <option value="RAL 1034 - Pastelgeel">RAL 1034 - Pastelgeel</option>
  <option value="RAL 1035 - Parelmoergrijs">RAL 1035 - Parelmoergrijs</option>
  <option value="RAL 1036 - Parelmoergoud">RAL 1036 - Parelmoergoud</option>
  <option value="RAL 1037 - Zonnegeel">RAL 1037 - Zonnegeel</option>
</select>
<div style="height: 30px; width: 100%; margin-top: 20px; background-color: #CCC58F;"></div>

例如：

• 选项“RAL 1000 - Groenbeige”需要将背景颜色更改为#CCC58F
• 选项“RAL 1001 - Beige”需要将背景颜色更改为#D1BC8A
• 选项“RAL 1002 - Zandgeel”需要将背景颜色更改为#D2B773 等等。

有人知道如何在 Gravity Forms (Wordpress) 中实现这一点吗？也许有脚本？

http://jsfiddle.net/tnqznhn2/

Answer 1

试试这个

变量colors 具有选择框的备用值，从第一个选项开始，它具有selected="selected"。

这里我们获取选项的索引（从0开始）并将其与数组匹配（以获取它的颜色）并将其应用于div

$(document).ready(function(){
  $(document).on("change", ".large.gfield_select", function(){
    var colors = ["#CCC58F","red", "#777", "#000", "gold", "grey", "blue", "green", "white", "yellow", "brown", "black", "silver", "orange", "#CCC58F","red", "#777", "#000", "gold", "grey", "blue", "green", "white", "yellow", "brown", "black", "silver", "orange", "#CCC58F","red", "#777", "#000", "gold", "grey", "blue", "green", "white", "#336699", "#f00"];
    var wth = $(this).find(":selected").index();
    var color = colors[ wth ];
    $(".color-bg").css("background-color", color );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="input_13" id="input_5_13" class="large gfield_select" tabindex="1" style="width: 100% !important;">
  <option value="---" selected="selected">---</option>
  <option value="RAL 1000 - Groenbeige">RAL 1000 - Groenbeige</option>
  <option value="RAL 1001 - Beige">RAL 1001 - Beige</option>
  <option value="RAL 1002 - Zandgeel">RAL 1002 - Zandgeel</option>
  <option value="RAL 1003 - Signaalgeel">RAL 1003 - Signaalgeel</option>
  <option value="RAL 1004 - Goudgeel">RAL 1004 - Goudgeel</option>
  <option value="RAL 1005 - Honinggeel">RAL 1005 - Honinggeel</option>
  <option value="RAL 1006 - Maisgeel">RAL 1006 - Maisgeel</option>
  <option value="RAL 1007 - Narcissengeel">RAL 1007 - Narcissengeel</option>
  <option value="RAL 1011 - Bruinbeige">RAL 1011 - Bruinbeige</option>
  <option value="RAL 1012 - Citroengeel">RAL 1012 - Citroengeel</option>
  <option value="RAL 1013 - Parelwit">RAL 1013 - Parelwit</option>
  <option value="RAL 1014 - Ivoorkleurig">RAL 1014 - Ivoorkleurig</option>
  <option value="RAL 1015 - Licht ivoorkleurig">RAL 1015 - Licht ivoorkleurig</option>
  <option value="RAL 1016 - Zwavelgeel">RAL 1016 - Zwavelgeel</option>
  <option value="RAL 1017 - Saffraangeel">RAL 1017 - Saffraangeel</option>
  <option value="RAL 1018 - Zinkgeel">RAL 1018 - Zinkgeel</option>
  <option value="RAL 1019 - Grijsbeige">RAL 1019 - Grijsbeige</option>
  <option value="RAL 1020 - Olijfgeel">RAL 1020 - Olijfgeel</option>
  <option value="RAL 1021 - Koolzaadgeel">RAL 1021 - Koolzaadgeel</option>
  <option value="RAL 1023 - Verkeersgeel">RAL 1023 - Verkeersgeel</option>
  <option value="RAL 1024 - Okergeel">RAL 1024 - Okergeel</option>
  <option value="RAL 1026 - Briljantgeel">RAL 1026 - Briljantgeel</option>
  <option value="RAL 1027 - Kerriegeel">RAL 1027 - Kerriegeel</option>
  <option value="RAL 1028 - Meloengeel">RAL 1028 - Meloengeel</option>
  <option value="RAL 1032 - Bremgeel">RAL 1032 - Bremgeel</option>
  <option value="RAL 1033 - Dahliageel">RAL 1033 - Dahliageel</option>
  <option value="RAL 1034 - Pastelgeel">RAL 1034 - Pastelgeel</option>
  <option value="RAL 1035 - Parelmoergrijs">RAL 1035 - Parelmoergrijs</option>
  <option value="RAL 1036 - Parelmoergoud">RAL 1036 - Parelmoergoud</option>
  <option value="RAL 1037 - Zonnegeel">RAL 1037 - Zonnegeel</option>
</select>
<div style="height: 30px; width: 100%; margin-top: 20px; background-color: #CCC58F;" class = "color-bg"></div>

祝你好运