javascript - 基于 select (Rails) 分别获取并显示数据库行中的所有值

Question

嗨，我在制作发票应用程序时遇到了困难。我希望有一个选项，您可以从 customers 表中添加现有客户，并将这些值添加到发票中。

我要显示的值是 company_name、vat_number 和 iban_number。

我尝试这样做:

<%= select_tag 'choose customer', options_from_collection_for_select(current_user.customers.all, 'id', 'company_name') %>

但显然这只能获取company_name的值。

我尝试使用collection.select，但该方法也只能获取数据库行的一个值，而不是全部 3 个值。

<小时/>

我希望能够从仅包含company_name的列表或表格行中进行选择，但是当我单击该company_name时，它还必须显示vat_number和 iban_number(分别位于页面的不同部分)。

在我的发票/_form中这样的内容是最佳的:

<p><%= customer.selected(:company_name) %></p>
<p><%= customer.selected(:vat_number) %></p>
<p><%= customer.selected(:iban_number) %></p>

这是我的发票 Controller :

class InvoicesController < ApplicationController
  before_action :set_invoice, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!

  # GET /invoices
  # GET /invoices.json
  def index
    @invoices =  current_user.invoices.all
    flash.now[:notice] = "U haven't added any invoices yet" if @invoices.empty?
  end

  # GET /invoices/1
  # GET /invoices/1.json
  def show
  end

  # GET /invoices/new
  def new
    @invoice = current_user.invoices.new
    @invoice.build_company
    @invoice.products.build
    @invoice.build_customer
  end

  # GET /invoices/1/edit
  def edit
  end

  # POST /invoices
  # POST /invoices.json
  def create
    @invoice = current_user.invoices.new(invoice_params)

    respond_to do |format|
      if @invoice.save
        format.html { redirect_to @invoice, notice: 'Your invoice is saved.' }
        format.json { render :show, status: :created, location: @invoice }
      else
        format.html { @invoice.build_company
                      @invoice.products.build
                      @invoice.build_customer
                      render :new }
        format.json { render json: @invoice.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /invoices/1
  # PATCH/PUT /invoices/1.json
  def update
    respond_to do |format|
      if @invoice.update(invoice_params)
        format.html { redirect_to @invoice, notice: 'Your invoice is edited.' }
        format.json { render :show, status: :ok, location: @invoice }
      else
        format.html { render :edit }
        format.json { render json: @invoice.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /invoices/1
  # DELETE /invoices/1.json
  def destroy
    @invoice.destroy
    respond_to do |format|
      format.html { redirect_to invoices_url, notice: 'Your invoice is deleted.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_invoice
      @invoice = current_user.invoices.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def invoice_params
      params.require(:invoice).permit(:number, :currency, :date, :duedate, :btwtotal, :subtotal, :total, :footer,
                                      customer_attributes: [:id, :company_name, :address_line_1, :iban_number, :vat_number, :zip_code, :_destroy],
                                      company_attributes: [:id, :iban_number, :company_name, :_destroy],
                                      products_attributes: [:id, :quantity, :description, :unitprice, :btw, :total])
    end
end

选择下拉列表位于新操作内部，所选数据应在新操作、索引操作和显示操作中可见，并在编辑操作中可编辑。

<小时/>

我阅读了整个 ruby​​ 文档，它们对这个特定实例的描述非常模糊。

注意: 我不仅仅想要一个答案，我希望能够了解如何在未来的项目中以不同的标准做到这一点。我希望其他人也能理解基本概念。

任何关于如何实现这一目标或在哪里寻找答案的想法都将非常感激

Answer 1

<%= select_tag 'choose customer', options_from_collection_for_select(current_user.customers.all, 'id', 'company_name'), id: "choose_customer" %>

您可以将rails中的更改事件绑定(bind)到ajax调用，发送所选对象的id，如果您想根据所选值获取数据，调用方法，然后使用该响应处理 View

    $(document).ready(function() { 
    $("#choose_company").bind("change",function() { 
        if ($(this).val() != undefined) { 
            $.ajax({ 
                url : "/my_action", 
                data: {'company': $(this).val()}, 
                dataType: "json", 
                type: "GET", 
                success : function(data) { 
                    $(".display_btw").html(data["btw_number"]); 
                    $(".display_iban").html(data["iban_number"]); 
                    $('.chosen_company_btw').val(data["btw_number"]).text(data["btw_number"]); 
                    $('.chosen_company_iban').val(data["iban_number"]).text(data["iban_number"]); 
                } 
            }) 
        } 
    }) 
})

您的 Controller 操作可以是这样的，

get '/my_action', to: 'invoices#my_action' 添加此路由。

def my_action 
    if params[:company].present? 
        @company = current_user.companies.find(params[:company]) 
        @data = Hash.new 
        @data["btw_number"] = @company.btw_number 
        @data["iban_number"] = @company.iban_number 
        render json: @data and return false 
    end 
end

此操作返回应根据所选值在 View 中显示的 vat_number 和 iban_number。