Rails: Filter list after selecting collection select

I have 3 tables:

Banco

  • id
  • descr

tipo_concept

  • id
  • concepto

bankcommission

  • id
  • descr
  • monto
  • tipo_concept_id
  • banco_id

I have 2 collection select: 1 selecting the bank and another selecting the type of concept.

What I need is that when there is a coincidence of these two tables in bankcommission it is shown in a list, and I understand that this is done with an ajax request, as would a ruby ​​on rails do? Or if there is another way to do it.

These are my partials

_form.html.erb

<%=form_for(@mov_ingreso, remote: true, :html => {:class => 'form-horizontal formulario '}) do |ingreso|   %>
       <% @mov_ingreso.errors.full_messages.each do |message| %>
        <div class="be-red white top-space">
          * <%= message %>
        </div>
    <% end %>

    <%= ingreso.fields_for :mov_principal do |f| %>
    <div class="form-group row">
      <label class="col-sm-2 col-form-label">  <%= f.label :referencia, "Referencia" %> </label>
      <div class="col-sm-10">
        <%= f.text_field :referencia, class: 'form-control', placeholder: "N° DE REFERENCIA" %>
      </div>
    </div>
    <div class="form-group row" >
      <label class="col-sm-2 col-form-label">  <%= f.label :id_tipo, "Tipo" %> </label>
      <div class="col-sm-10">

        <%= f.collection_select(:id_tipo, TipoConcepto.where(:forma => "1"), :id, :tipo,{:prompt => "SELECCIONE EL TIPO DE INGRESO"}, html_options = {class: 'custom-select tipoconcep '}) %>

      </div>
    </div>

        <div class="form-group row" >
          <label class="col-sm-2 col-form-label">  <%= f.label :nivele_id, "Niveles" %> </label>
          <div class="col-sm-10">


            <%= f.collection_select(:nivele_id, Nivele.where(:tipo_movimiento_id => "1"), :id, :descripcion,{:prompt =>"SELECCIONE EL NIVEL"} ,{class: 'custom-select'} ) %>

          </div>
        </div>
    <div class="form-group row" >
      <label class="col-sm-2 col-form-label">  <%= f.label :id_banco, "Banco" %> </label>
      <div class="col-sm-10">
        <%= f.collection_select(:banco_id, Banco.all, :id, :nombre,{:prompt =>"SELECCIONE EL BANCO"} ,{class: 'custom-select',  id: 'selectbanco', :onchange => "cambiarlista()"} ) %>

      </div>
    </div>

     <div class="form-group row"  >
       <label class="col-sm-2 col-form-label">  <%= f.label :date_set, "Fecha" %> </label>
       <div class="col-sm-10">
         <%= f.text_field :date_set, class: 'form-control',   data: { provide: "datepicker",
                                                'date-format': 'dd-mm-yyyy',
                                                'date-autoclose': 'true',
                                                'date-today-btn': 'linked',
                                                'date-today-highlight': 'true'}, value: Time.now.strftime('%d-%m-%Y') %>


       </div>
     </div>
<% end %>
    <div class="form-group row" >
          <label class="col-sm-2 col-form-label"> <%= ingreso.label :debe, "Monto" %> </label>
          <div class="col-sm-10">
            <%= ingreso.text_field :debe, class: 'form-control montobase' , :id => "debe", placeholder: "MONTO DE INGRESO" %>
          </div>


    </div>



    <div class = "field">
      <%= ingreso.submit "Guardar", class:"guardo btn btn-primary" %>
    </div>


<%end%>

_totalform.html.erb

<h4 id="totalp" class="page-title totale">0.00</h4>
<div class="table-responsive">
  <table class="table table-borderless table-hover table-centered m-0 listacom " id="tabla1">



    <thead class="thead-light text-left">
    <tr>
      <th scope="col">Comision</th>
      <th scope="col">%</th>
      <th scope="col">Total</th>

    </tr>
    </thead>

    <tbody class = "listados" id ="listadoso">
     <% @bankcommission.each do |ingresos| %>

    <tr class="text-left listado " id="prueba5">

          <td><%=ingresos.descrip %></td>

          <td class="porcomision" id=porocomision><%= ingresos.pvalue %> </td>

            <td class="totalcomision" id= "totalcom"><%= number_with_precision( ingresos.totalxcom, precision: 2, separator: ',', delimiter: '.' ) %></td>
        </tr>
    <% end %>
    </tbody>
  </table>
</div>

_bodyform.html.erb

   <div class="card-box  ">



      <h4 class="header-title text-center"><%= tipooper%> </h4><br>
        <% if cuerpo == 'N' %>
              <%= render "form"  %>
        <% else %>
              <%= render "totalform" %>     
        <% end %>



</div>

Este es un codigo que tengo en coffescript/jQuery que me realiza otra funcion

$ ->
  $('#debe').keyup (e) ->
    share = parseFloat($(this).val())
    total =0
      console.log(share)


       $('.listado').each (i, el) ->
          if isNaN(share)
            val =0
           else
            val = share * (Number($('.porcomision', el).html())/100)

          total = total + val
          num = val.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
          $('.totalcomision', el).html num
          $('#totalp').text total

I trying to make this request but I am not sure how to do it, and I do not know how the url is handled in this case, I am not very familiar with javascript

cambiarlista ->
  concepto = $('.tipoconcep').val()  #Aqui necesito tomar el id
  bancos = $(this).val()
  tipoconcep
  console.log evento


  $.ajax
    type: 'POST'
    url: "<%= url_for banco_bankcommission_path%>"
    data: 
      id_tipo: concepto
      id_banco: bancos

    success: ->
      console.log 'Datos guardados'
      return
    error: ->
      console.log 'error ajax'
      return

Thanks to everyone!

Why don’t you want to make this via one select? If I understand you correctly, you need to take Banccommision.joins(:tipo_concept, :banco) - this will return those banccommisions that do have both tipo_concept and banco

You right, i’m sorry my bad english, i need that after select any collection select “bank” or “tipo_concepto” it refresh or load the table with the condition that i need