Ajax：如何显示动态下拉菜单和文本框？

Question

当我点击周期的下拉值时，它应该自动显示rate_of_interest的文本框值。

这里是我的模型代码来计算利息值：

before_save :calculate_value 
def calculate_value 
    if self.age >= 75 && self.no_of_year == 5 
    self.interest_rate == 11.75 
    elsif self.age >= 75 && self.no_of_year == 3 
    self.interest_rate == 11.5 
    elsif self.age >= 75 && self.no_of_year == 2 
    self.interest_rate == 11 
    elsif self.age >= 75 && self.no_of_year == 1 
    self.interest_rate == 10.5 
    elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 5 
    self.interest_rate == 11.75 
    elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 4 
    self.interest_rate == 11.5 
    elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 3 
    self.interest_rate == 11 
    elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 2 
    self.interest_rate == 10.5 
    elsif self.age >= 58 && self.age <= 75 && self.no_of_year == 1 
    self.interest_rate == 10 
    elsif self.age >= 75 && self.no_of_year == 4 
    self.interest_rate == 11.75 
    else 
    self.interest_rate 
    end 
end 

根据年份和年龄应该自动显示兴趣。

我的看法页：

<h4><%= f.label :periods, class:'required' %> 
<%= f.select(:no_of_year, options_for_select([['',''],['1','1'], ['2','2'],['3','3'],['4','4'],['5','5']]))%></h4> 

<h4><%= f.label :interest_rate, class:'required' %> 
<%= f.text_field :interest_rate, :readonly => true %></h4> 

如何以及在何处使用Ajax和JavaScript？

Answer 1

首先，你最好使用case switch（在Ruby）：

def calculate_value 
    case self.age 
    when >= 75 
     self.interest_rate = 10 + (0.5 * self.no_of_year) #-> algo to determine interest 
    when >= 58 && <= 75 
     self.interest_rate = 10 + (0.5 * self.no_of_year) #-> algo to determine interest 
    else 
     self.interest_rate 
    end 
end 

-

阿贾克斯

为了使用Ajax和JavaScript，你首先需要有一个endpoint发送您的数据。这应该在路线定义：

#config/routes.rb 
get "interest", to: "application#calculate_interest" 

这一操作将允许您使用Ajax这样的：

#app/assets/javascripts/application.js 
$(".select").on("change", function() { //Binds to your select box "change" event 
    $.ajax({ 
     url: "/interest", //Sends to your endpoint 
     data: {"year": $(this).val() } 
     success: function(data){ 
      //where the response will be processed 
      $(".textfield").val = data; 
     } 
    }); 
}); 

几个注意事项，以上面的代码 -

1. 您需要能够选择特定元素 - 我刚刚使用了.select等 - 您应该使用id标签来选择它们 individua LLY
2. 你的控制器需要处理响应 - 通过使用respond_to块：

#app/controllers/application_controller.rb 
class ApplicationController < ActionController::Base 
    def calculate_interest 
     respond_to do |format| 
      format.html 
      format.js 
     end 
    end 
end 

---

更新

如果您想更新从.on("change"事件的文本框中select箱子：

http://jsfiddle.net/CwU33/

$("#test").on("change", function(){ 
    value = $(this).val(); 
    $("#text").val(value); 
}); 

<select id="test"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<input type="text" id="text" value="testing">