本文将指导开发者如何在使用 Slim Select 插件的 Rails 应用中，根据用户在下拉列表中选择的币种名称，动态地从数据库获取并显示对应的价格。我们将使用 Ajax 技术实现前后端的数据交互，并提供详细的代码示例和步骤说明，帮助您快速实现此功能。
前端实现：使用 JavaScript (CoffeeScript) 和 Ajax
首先，我们需要监听 Slim Select 的选择事件，并在事件触发时发起 Ajax 请求，从后端获取对应币种的价格。
以下是使用 CoffeeScript 实现的示例代码：
coinWithPrices = ->
coin = $('#investment_coin_name').val()
$.ajax(url: '/commons/get_prices', data: { coin_name: coin })
.then (data) ->
$('#investment_shopping_price').val(data.coin_price) // 更新价格字段
$(document).on "turbolinks:load", ->
$('#investment_coin_name').on 'change', coinWithPrices # 监听选择事件代码解释：
- coinWithPrices 函数：
- 获取选中的币种名称 coin。
- 使用 $.ajax 发起一个 GET 请求到 /commons/get_prices，并传递 coin_name 作为参数。
- 在 then 回调函数中，从返回的 data 对象中获取 coin_price，并将其赋值给 shopping_price 输入框。
- $(document).on "turbolinks:load", ->：
- 确保在 Turbolinks 加载完成后执行代码。
- 使用 .on('change', ...) 监听 investment_coin_name 选择框的 change 事件，并在事件触发时调用 coinWithPrices 函数。
注意事项：
- 确保已经引入 jQuery 库。
- 根据实际情况修改选择器 (#investment_coin_name, #investment_shopping_price) 和 URL (/commons/get_prices)。
- 如果未使用 Turbolinks，则将 turbolinks:load 替换为 DOMContentLoaded。
后端实现：Rails Controller
接下来，我们需要在 Rails Controller 中处理 Ajax 请求，从数据库中查询对应币种的价格，并将其返回给前端。
绿色风格农林牧渔行业网站模板(带手机端)自带移动端安装即用，图片文字可视化，支持伪静态，支持内容模型、多语言、自定义表单、筛选、多条件搜索等功能，支持多种URL模式及模型、栏目、内容自定义地址名称，满足各类网站推广优化的需要。模板特点：1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持移动端 3、前端banner轮播
以下是 Rails Controller 中的示例代码：
def get_prices
@coin_name = params[:coin_name]
@coin = Coin.find_by(name: @coin_name) # 假设你有一个 Coin 模型
if @coin
@coin_price = @coin.price # 假设 Coin 模型有一个 price 属性
render json: { coin_price: @coin_price }
else
render json: { coin_price: nil } # 或者返回一个错误信息
end
end代码解释：
- get_prices action：
- 从 params 中获取 coin_name。
- 使用 Coin.find_by(name: @coin_name) 从数据库中查找对应的 Coin 记录。
- 如果找到 Coin 记录，则从 Coin 记录中获取 price，并将其赋值给 @coin_price。
- 使用 render json: { coin_price: @coin_price } 将 coin_price 以 JSON 格式返回给前端。
- 如果未找到 Coin 记录，则返回 coin_price: nil 或者一个错误信息。
注意事项：
- 确保已经创建了 Coin 模型，并且 Coin 模型有一个 name 和 price 属性。
- 根据实际情况修改模型名称和属性名称。
- 确保在 routes.rb 文件中定义了 /commons/get_prices 路由。例如：get '/commons/get_prices', to: 'commons#get_prices'。
视图更新
在前端 JavaScript 代码中，确保使用正确的选择器来更新 shopping_price 字段。例如，在提供的代码中，应该使用 #investment_shopping_price 而不是 #investment_coin_price。
总结
通过以上步骤，您就可以在 Rails 应用中实现根据选择的币种名称动态显示价格的功能。这个教程涵盖了前端 JavaScript 代码的编写、后端 Rails Controller 的实现以及视图的更新。请根据您的实际情况修改代码，并确保所有依赖项都已正确安装。
