0

我正在尝试制作一个动态表单，其中底部某些表单的名称基于顶部某些表单的值。例如...

在页面顶部会有两个下拉菜单。在页面底部，将有两个单选按钮。第一个单选按钮的名称将具有第一个下拉菜单选项的名称，第二个单选按钮将具有第二个下拉菜单选项的名称。

这是我到目前为止所拥有的：

<%= simple_form_for(@game) do |f| %>
  <%= f.error_notification %>
  <center>
    <div class="form-inputs">
      <%= choices = options_for_select( Team.all.map { |team| team[:name] } ) %>
        <p>Team 1:</p>
        <%= f.select :first_team_name, choices %>
        <p>Team 2:</p>
        <%= f.select :second_team_name, choices %>
        <p>Who you think will win</p>
        <%= f.text_field :user_guess %>

        </br>

        <%= f.submit "Simulate!", class: "btn btn-large btn-primary"%>
    </div>
  </center>
<% end %>

文本字段将被那些单选按钮代替，而不是文本字段。

在提交表单之前如何访问下拉菜单的值？

4

1 回答 1

1

要获得更全面的答案，我建议您观看有关此主题的railscasts 剧集，但您需要专业（阅读：付费）订阅。

由于您没有做任何超级复杂的事情，因此您可以使用一些 javascript 快速而肮脏地完成它：

$(function(){
  $('select').change(function(){
    html = ''
    $('select').each(function(){
      html += $(this).val() + '<input type="checkbox" name="game[user_guess]" val="' + $(this).val() +'"/>'
    })
    $('div.user_guess').html(html)
  })
})

如果您直接粘贴代码，您还需要在视图中添加一个 div：

<p>Who you think will win</p>
<div class="user_guess"></div>

用 javascript 构建 HTML 感觉不好？您可以让change()处理程序进行 ajax 调用，以加载服务器生成的 HTML，这可以使用适当的表单助手等进行。但是对于这样一个简单的任务，它似乎有点过头了。

（另外，请注意，如果团队名称可以由用户定义，则此 javascript 可能会使您面临脚本注入攻击，因此请根据需要进行清理。）

请注意，如果您希望表单在用户交互时更改，而用户实际上不必在表单更改之前提交表单（重建页面并重新加载视图），则必须使用 javascript。我认为。你可以用 CSS 做一些时髦的事情，但实现起来真的很讨厌。

于 2013-03-12T02:50:11.053 回答