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">