根据下拉菜单的选项从二维数组中设置文本字段的值答案

【问题标题】：Setting a value of a text field from a 2D array depending on the option of a dropdown menu根据下拉菜单的选项从二维数组中设置文本字段的值
【发布时间】：2014-04-25 21:14:32
【问题描述】：

我有一个为美国各州提供选项的下拉菜单。

状态数组被声明到控制器中，格式如下：

@us_states = [
      ['Alabama', 'AL'],
      ['Alaska', 'AK'],
      ['Arizona', 'AZ']
]

现在，我有另一个数组（也在控制器上），每个状态都有一个数字，格式如下：

@electricity_table = [
        ['Alabama',0.078345],
        ['Alaska',0.1211736],
        ['Arizona',0.0773004]
]

使用change 事件，通过jQuery，我可以通过alert 看到状态下拉菜单的值是第二列（即AL、AK）。

现在我想根据所选的州设置 ID 为 electr 的 text_field。也就是说，如果选择了 'AL'，则作为 jQuery：
$('#electr').val(0.078345);

我怎样才能做到这一点？

我是 Ruby on Rails 和 MVC 的新手，所以请多多包涵

编辑：

这是状态下拉代码：

<%= f.input :var_state_oth, label: false, wrapper: :append do %>
<%= f.input_field :var_state_oth, collection: @states, class: 'answer-single', id: 'app_var_state_oth' %>
<% end %>

这是必须设置的 text_field：

<%= f.input :electr, label: false, wrapper: :append do %>
<input class="answer-single" data-autonumeric="true" data-m-dec="0" id="electr" name="app[electr]" type="text" value="<%= @app.var_energy_cons_reduction %>">

这是 @adeneo 提出的 jQuery 代码段，并添加了警告：

$('#var_state_oth').on('change', function()  {
  alert("change detected");
    var val = $('option:selected', this).text();
    $('#electr option').prop('selected', false).filter(function() {
         return $(this).text().indexOf(val) != -1
    }).prop('selected', true);
});

我什至没有看到警报。

【问题讨论】：

您的第二个数组与您使用的值不匹配。您是否在选项文本中使用了完整的州名？
@adeneo：是的，在选项的文本中我可以看到Alabama、Arizona等。
第二次选择也是一样，看到的是全州名，但数字是数值。
在下面的答案中做了一些更改，看看你是否收到了警报，然后打开你的控制台看看是否有任何错误等。
@adeneo：我看不到答案：/你不小心删除了吗？

标签： javascript jquery ruby-on-rails ruby arrays

【解决方案1】：

看看这个 jsFiddle 的一个解决方案：http://jsfiddle.net/H6Sqh/1/

$('#var_state_oth').on('change', function () {
   var sel = $('option:selected', $(this)).text();
    $('#electr').val(elec_rates[sel]);
});

您需要使用来自 @electricity_table 的数据填充 Javascript 变量 elec_rates，就像在假设 erb 模板的视图模板中一样：

<script type="text/javascript">
    <%= var elec_rates = #{@electricity_table.to_json}; %>
</script>

【讨论】：

change 事件没有被这个 jQuery 代码捕获。我只能设置onchange函数调用。考虑到这一点，代码将如何？（this 关键字就是我所说的）。另外，_form.html.erb 文件的什么位置应该添加最新的代码？
看过 jsFiddle 吗？那是您正在寻找的行为吗？该代码正在 jsFiddle 上运行，您需要为您的代码定制它...
我看过 jsFiddle，我相信这就是我需要的。但是，当在_form.html.erb 文件中添加<% var elec_rates = ${@electricity_table.to_json}; %> 时，我收到了这个错误undefined method 'var'。
太好了，所以如果这是所需的行为，您只需将 js 代码包装在脚本标记中。请参阅上面答案中的更新代码。基本上你需要将 ruby 实例变量 @electricity_table 带入 js 代码，以便 jQuery 可以使用它。干杯。
现在我收到此错误：'${' is not allowed as a global variable name /path/_form.html.erb:147: syntax error, unexpected end-of-input。该数组被声明到控制器的new 操作中。