ruby-on-rails – Ruby on Rails – 更改事件的下拉框

前端之家收集整理的这篇文章主要介绍了ruby-on-rails – Ruby on Rails – 更改事件的下拉框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的应用程序中有两个下拉框.
根据第一个组合框中选择的值,第二个下拉框中的值应该被填充.这些值应来自数据库.

请帮帮我.

解决方法

这是一个使用 jquery-ujs(https://github.com/rails/jquery-ujs)的干净方法

在你看来:

<%= 
  select_tag  
      :first_select,# name of selectBox
      options_from_collection_for_select(@myrecords,"id","name"),# your options for this select Box
      :'data-remote' => 'true',# important for UJS
      :'data-url' => url_for(:controller => 'MyController',:action => 'getdata'),# we get the data from here!
      :'data-type' => 'json' # tell jQuery to parse the response as JSON!
%>


<%= 
   select_tag  
       :second_select,# name of selectBox
       "<option>Please select something from first select!</option>"
%>

您的控制器:

class MyController < ApplicationController


  def getdata
    # this contains what has been selected in the first select Box
    @data_from_select1 = params[:first_select]

    # we get the data for selectBox 2
    @data_for_select2 = MyModel.where(:some_id => @data_from_select1).all

    # render an array in JSON containing arrays like:
    # [[:id1,:name1],[:id2,:name2]]
    render :json => @data_for_select2.map{|c| [c.id,c.name]}
  end
end

在你的application.js中:

$(document).ready(function() {

  // #first_select is the id of our first select Box,if the ajax request has been successful,// an ajax:success event is triggered.

  $('#first_select').live('ajax:success',function(evt,data,status,xhr) {
    // get second selectBox by its id
    var selectBox2 = $('#second_select');

    // empty it
    selectBox2.empty();

    // we got a JSON array in data,iterate through it

    $.each(data,function(index,value) {
      // append an option
      var opt = $('<option/>');

      // value is an array: [:id,:name]
      opt.attr('value',value[0]);
      // set text
      opt.text(value[1]);
      // append to select
      opt.appendTo(selectBox2);
    });
  });

});

猜你在找的Ruby相关文章