как сохранить значение select_tag в javascript var?

Question

Я хочу сохранить значение выбора из формы в моем JavaScript.

Это работает:

<div id="tshirt-div">
    ....
</div>
<select id="tshirt-color">
   <option value="#fff">White</option>
   <option value="#000">Black</option>
   <option value="#f00">Red</option>
   <option value="#008000">Green</option>
   <option value="#ff0">Yellow</option>
</select>

<script>
document.getElementById("tshirt-color").addEventListener("change", function(){
    document.getElementById("tshirt-div").style.backgroundColor = this.value;
}, false);
</script>

Я пытаюсь сделать это:

<%= f.grouped_collection_select :color_id, @items.order(:title), :colors, :title, :id, :title, include_blank: "Select Color", id: "tshirt-color" %>
<script>
document.getElementById("tshirt-color").addEventListener("change", function(){
   var bg_color = this.value
   document.getElementById("tshirt-div").style.backgroundColor = <%= Color.find(bg_color) %>;
}, false);
</script>

Несколько моих попыток:

var bg_color = document.getElementById("tshirt-color").value

внутри и снаружи функции

var bg_color = document.getElementById("tshirt-color").addEventListener("change", function(){
    document.getElementById("tshirt-div").style.backgroundColor = <%= Color.find(bg_color.value) %>;
, false);

Я пытался сохранить var разными способами, но каждый из них дает мне следующееошибка:

неопределенный локальный метод или переменная 'bg_color'

Значение f.grouped_collection_select является целым числом, поэтому я хочу найти название цвета (красный,синий, зеленый и т. д.) и вернуть его в ...style.backgroundColor.

Как сохранить выбор из формы, сохранить его как переменную, а затем найти цвет из цветовой модели?

Answer 1

Вы всегда можете просто сохранить значение в скрытом поле элемента и просто обновлять его при каждом изменении выбора.

Затем сделайте что-то вроде

<%= hidden_field_tag 'color_id', '0', onchange: "changeColor()", id: 'selected-color-field'%>
<script>
  function changeColor() {
    var selectedColor = document.getElementById("selected-color-field").value
    // Do whatever
  }
</script>

Answer 2

Вы не можете получить доступ к переменным JavaScript внутри тегов ERB.ERB лежит в верхней части сценария.Это означает, что при запросе страницы к серверу Rails он скомпилирует страницу, чтобы интерпретировать ERB.Затем клиенту отправляется простой файл JavaScript или файл HTML.JavaScript будет выполняться на клиенте.

<%= Color.find(bg_color) %>

Запускается на стороне сервера и не имеет доступа к переменной JavaScript bg_color.

. Простое решение состоит в том, чтобы предоставить всесначала выберите цвета из этого списка.

const colors = <%= Color.pluck(:id, :value).to_h.to_json.html_safe %>;

document.getElementById("tshirt-color").addEventListener("change", function(){
  document.getElementById("tshirt-div").style.backgroundColor = colors[this.value];
}, false);

Если вы не хотите указывать все цвета заранее, вам нужно настроить запрос AJAX, который запрашивает сервер при выборе цвета..

---

Позвольте мне быстро объяснить <%= Color.pluck(:id, :value).to_h.to_json.html_safe %>.

tmp = Color.pluck(:id, :value) # retrieve the id and value of the colors
#=> [[1, "#fff"], [2, "#000"]]
tmp = tmp.to_h # convert the nested array into a hash
#=> { 1 => "#fff", 2 => "#000" }
tmp = tmp.to_json # convert the hash to a JSON string
#=> '{"1":"#fff", "2":"#000"}'
tmp = tmp.html_safe # mark the string as HTML safe so ERB won't replace characters such as " with "
#=> '{"1":"#fff", "2":"#000"}'

Поскольку JSON - это сокращение от нотации объектов JavaScript, его можно просто прочитать как часть JavaScript.

---

Кроме того, вы можете вручную создать параметры и предоставить значение цвета через пользовательский атрибут.Например, параметр может выглядеть примерно так:

<option value="1" data-color-value="#fff">White</option>

Затем используйте дополнительный атрибут для установки цвета.

const color = this.options[this.selectedIndex].dataset.colorValue;
document.getElementById("tshirt-div").style.backgroundColor = color;