javascript - 使用 Javascript 在 hidden_​​field_tag 中保存一个值

Question

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

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

我想在用户从选择标签中选择内容后立即将城市名称保存在 hidden_​​field_tag 中。我如何使用 Javascript 实现它？

我是 Javascript 的新手，请不要强行判断。

Answer 1

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

首先在 Rails View 中添加隐藏字段(具有空值)。

现在您需要将 Javascript 添加到您的页面(您可能已经在 app/assets/javascripts/application.js 处有一个文件，它包含在您的所有页面中；包括 JS Rails 模板是它自己的问题)。您将需要两个函数，jQuery 将使生活变得更轻松:

1. 一个函数，它检查 select 标签的值，并使用 select 标签的值更新隐藏标签的值。
2. 一个在页面加载时运行的函数，它将事件监听器附加到 select 标记；这将监听“select”标签上的“change”事件，并在发现它时调用我们的第一个函数。

这些看起来有些像这样(注意，如果不做任何更改，这段代码几乎肯定不对您有用):

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 函数获得正确的值来放置在隐藏的表单标签中。但这就是我开始尝试做的事情的方式；其余的是您页面特有的详细信息。