使用Javascript在hidden_​​field_tag中保存值

Question

我在rails app中有一个表单，其中包含用于选择城市并保存其ID的字段。

= select_tag 'building[city_id]', 
options_for_select(cities.map{|c| [c.name, c.id]}),
onchange: "myFunction();", include_blank: "Choose city"

我想在用户从select标签中选择某个内容时，在hidden_​​field_tag中保存城市名称。如何使用Javascript实现此功能？

我对Javascript很新，请不要刻意判断。

Answer 1

我建议做尽可能少的JS。所以：

首先在Rails视图中添加隐藏字段（带空值）。

现在您需要在页面中添加Javascript（您可能已经在app/assets/javascripts/application.js处有一个文件，该文件包含在您的所有页面中;包括带有Rails模板的JS是它自己的问题）。你需要两个函数，jQuery会让生活变得更轻松：

1. 检查select标记值的函数，并使用select标记中的值更新隐藏标记的值。
2. 在页面加载时运行的函数，它将事件侦听器附加到select标记;这将听取＆＃34;改变＆＃34; ＆＃34;选择＆＃34;标记并在看到它时调用我们的第一个函数。

这些会看起来像这样 （N.B.这段代码几乎肯定会不为你工作而不做任何改动）：

function setHiddenValue() {
  // Get the value from the select tag
  var selectValue = $('select#building_city_id').val();
  // Set the hidden tag's value to the select tag value we got in the last line
  $('input[type=hidden]#city_name').val(selectValue);
}

我猜测选择器获取元素，但是Rails会在它们上面放置ID，你可以使用它们。

$(document).ready(function () {
  $('select#building_city_id').on('change', setHiddenValue());
}

显然这很粗糙，不会在粘贴时立即工作。您要确保选择器与Rails在您的HTML中放置的内容相匹配，您是否想要为了确保脚本包含在您的页面中并且正在设置事件监听器，您需要检查jQuery是否存在，并且您希望确保setHiddenValue函数得到要放入隐藏表单标记的正确值。但这就是我如何开始你想要做的事情;其余的是您页面特有的详细信息。