Question

如何获取在＆lt;上选择的选项的值选择＆gt;这是使用Ruby on Rails中的select_tag帮助程序构建的。

代码如下：

<%= f.label "Favorite Team" %>
<%= select_tag :fav_league, options_for_LEAGUEs, :onchange => 'check1()' %>

我想要这个值，因为根据选择的选项，不同的＆lt;选择＆gt;将出现在用户面前。示例：有一个表单，我想知道该用户所在县的名称是什么，因此我创建了第一个＆lt;选择＆gt;用户选择状态的位置。根据他选择的选项，第二个＆lt;选择＆gt; （他在哪里选择他的县，和这将是用表格提交的，没有州名缩写。）同样的情况发生在我的网络应用程序上，但是与国家联盟和团队（这就是为什么options_for_LEAGUEs（一个名为每个联盟的数组））

Ps：我想在Ruby中使用它，如果它可以移动到javascript那就更好了，但你必须解释如何

Answer 1

代码如下：
<%= f.label "Favorite Team" %>
<%= select_tag :fav_league, options_for_LEAGUEs, :onchange => 'check1()' %> 
如何获取<select>上选中的选项的值 ...如果它可以移动到javascript那就更好了，

在select_tag()中，您为onchange属性指定了函数check1()。为onchange属性指定的函数是一个javascript函数，当用户对select进行更改时，Web浏览器将四处寻找一个名为check1（）的javascript函数来执行。因此，您需要在js文件中定义一个名为check1（）的javascript函数。在rails中，您将js文件放在app / assets / javascripts目录中。这是一个例子：

应用程序/资产/ Javascript角/ users.js：

function check1(select) {
  var options = select.options;
  var selected_index = select.selectedIndex;
  var selected_val = options[selected_index].value;
  var selected_text = options[selected_index].text;

  //Now that you have the selected option, do something with it:
  alert("val: " + selected_val + ", text: " + selected_text);

  //Or, maybe send the data to the server and your rails app:
  var post_data = {
    "fav_league": {"val": selected.val(), "text": selected.text()}
  };

  $.post('/users/dostuff', post_data, function(response_data) {
    $("#result").html(response_data); 
  });

}

请注意以下onclick中使用this：

应用程序/视图/用户/ index.html中：

<h1>Users#index</h1>
<p>Find me in app/views/users/index.html.erb</p>

<% options_for_LEAGUEs = [
    ["league1", 1],
    ["league2", 2],
    ["league3", 3]
  ]
%>

<div>
<%= 
select_tag(
  :fav_league,
  options_for_select(options_for_LEAGUEs),
  onclick: 'check1(this)'
)
%>
</div>

<div id="result">
</div>

应用程序/控制器/ users_controller.rb：

class UsersController < ApplicationController
  def index
  end

  def dostuff
    if request.xhr?  #If this is an incoming ajax request...
      val = params['fav_league']['val']
      text = params['fav_league']['text']
      render plain: "You sent me: #{val}, #{text}"
    end

    #Otherwise, by default rails renders app/views/users/dostuff.html.erb
  end
end

或者，您可以在html中放弃内联onclick，并使用jquery来安装onclick处理程序：

$(document).ready(function() {

  $("#fav_league").on("change", function() {
    var selected = $(this).find("option").filter(":selected");

    //Now that you have the selected option, do something with it:
    alert(
      "val = " + selected.val() + ", text = " + selected.text()
    );

    //Or, maybe send the data to the server and your rails app:
    var post_data = {
      "fav_league": {"val": selected.val(), "text": selected.text()}
    };

    $.post('/users/dostuff', post_data, function(response_data) {
      $("#result").html(response_data); 
    });

  });
});

对评论的回应：

根据联盟选择动态创建单个团队选择可能更容易，然后让用户提交表单以将团队选择发送到服务器。这是一个例子：

您可以在视图中使用带有数据属性的空<div>，并使用rails将团队名称插入到data属性中，这将允许javascript在浏览器中执行以从html中检索这些名称：

<%= content_tag :div, id: "teams_div", data: {teams: @teams_for_league} do %>
<% end %>

应用程序/视图/用户/ index.html.erb：

<h1>Users#index</h1>
<p>Find me in app/views/users/index.html.erb</p>

<div>
<%= form_for @user, url: {action: 'dostuff', method: "post"} do |f| %>

<%= f.label "Favorite Team" %>
<%= select_tag(
  :fav_league, 
  "<option disabled selected>--select league--</option>#{options_for_select(@leagues)}".html_safe
)
%>

<%= content_tag :div, id: "teams_div", data: {teams: @teams_for_league} do %>
<% end %>

<%= f.submit('Submit') %>
<% end %>
</div>

请注意，如果您未在选项字符串上调用html_safe()，则可能无法正确创建选项。 options_for_select()会为您处理，但如果您想为选项添加自定义样式并手动将其添加到选项字符串，则需要调用html_safe()。

应用程序/控制器/ users_controller.rb：

class UsersController < ApplicationController
  def index
    @user = User.find(1)

    @leagues = [
      ["league1"],
      ["league2"],
      ["league3"],
    ]

    @teams_for_league = {
      league1: ["team1", "team2"],
      league2: ["team3", "team4"],
      league3: ["team5", "team6", "team7"],
    }

  end

  def dostuff
    puts "-" * 10
    p params
    puts "-" * 10

    team_choice = params[:team_select]

    if team_choice 
      puts "**** The user chose: #{team_choice} *****" 
    else  #The user failed to select a team...
      redirect_to action: :index
    end

  end
end

应用程序/资产/ Javascript角/ users.js：

$(document).ready(function() {

    $("#fav_league").on("change", function() {
      var $selected = $(this).find("option").filter(":selected");
      var league_choice = $selected.text();
      var $teams_div = $('#teams_div');
      var teams_arr = $teams_div.data("teams")[league_choice];
      var team_name,
          $new_select;

      $teams_div.empty();

      $new_select = $(
          '<select>', 
          {name: "team_select"}
      ).appendTo($teams_div);

      $new_select.append(
          $("<option>", 
            {disabled: true, selected: true}
          ).text("--select team--")
      );

      for (team_name of teams_arr) {
        $new_select.append(
          $("<option>").text(team_name).attr('value', team_name)
        );
      };

    });
});

如果您选择一个团队，然后提交表单，您将在运行服务器的窗口中看到以下输出：

...
...
----------
{"utf8"=>"✓", "_method"=>"patch",
"authenticity_token"=>"By2pZpUTxK2JZHBHYA7C4tryFTx2btBLnoGjdYpiOxPeHaHcLAO0VJue64HlTLGVLHzkZkdj4SRqAAt85Mn32A==",    
"fav_league"=>"2", "team_select"=>"team4", "commit"=>"Submit",  
"method"=>"post", "controller"=>"users", "action"=>"dostuff"}                            
----------
**** The user chose: team4 *****
  Rendered users/dostuff.html.erb within layouts/application (0.0ms)
Completed 200 OK in 20ms (Views: 19.2ms | ActiveRecord: 0.0ms)

如何使用select_tag帮助程序从选定的选项中获取值

1 个答案: