フィルタ結果ドロップダウンメニューがRails Bootstrapフォームで機能しないGEM

Question

私はRoRのスキルを向上させるためにこれをやっています。私は自分が作成したフォームをスタイルすることを試みています。これがフォームのオリジナルコードです。

<%= form_tag('/quotation/tints/generate') do %> 
    <%= label :manufacturer_id, 'Manufacturer' %> 
    <div class="field"> 
     <%= collection_select(:tint, :manufacturer_id, Manufacturer.order(:name), :id, :name, {:prompt => "Select Manufacturer" }) %> 
    </div> 

    Model: 
    <div class="field"> 
     <%= grouped_collection_select(:tint, :model_id, Manufacturer.order(:name), :models, :name, :id, :name, {:prompt => "Select Model"}) %> 
    </div> 

    <%= label :price_front, 'Front Tint' %> 
    <div class="field"> 
     <%= collection_select(:price, :price_front, Price.where('catogery_id' => "1").order(:name), :id, :name, {:prompt => "Select Front Tint"}) %> 
    </div> 

    <%= label :price_rear, 'Size and Back Tint' %> 
    <div class="field"> 
     <%= collection_select(:price, :price_rear, Price.where('catogery_id' => "1").order(:name), :id, :name, {:prompt => "Select Side & Rear Tint"}) %> 
    </div> 
    <div class="form-group"> 
     <%= submit_tag 'Submit', class: "button btn btn-primary" %> 
    </div> 
<% end %> 

ユーザーはModelを選択するために、第1 Manufacturerを選択しなければなりません。 ModelはManufacturerに基づいてフィルタリングされます。これはアクションをアクティブにするために使用するスクリプトです。それは完全に動作します。

jQuery -> 
    $('#tint_model_id').parent().hide() 
    models = $('#tint_model_id').html() 
    $('#tint_manufacturer_id').change -> 
     manufacturer = $('#tint_manufacturer_id :selected').text() 
     options = $(models).filter("optgroup[label='#{manufacturer}']").html() 
     if options 
      $('#tint_model_id').html(options) 
      $('#tint_model_id').parent().show() 
     else 
      $('#tint_model_id').empty() 
      $('#tint_model_id').parent().hide() 

今、フォームとドロップダウンメニューのスタイルを変更しようとしています。私はbootstrap_form宝石を使って私の人生を楽にしています。この宝石を使用するには、宝石で作業するためにフォームを変更する必要があります。フォームのコードを以下のコードに変更しました。

<%= bootstrap_form_tag url: '/quotation/tints/generate' do |f| %> 
    <div class="field"> 
     <%= f.collection_select :manufacturer_id, Manufacturer.order(:name), :id, :name, {:prompt => "Select Manufacturer"} %> 
    </div> 

    <div class="field"> 
     <%= f.grouped_collection_select :model_id, Manufacturer.order(:name), :models, :name, :id, :name, {:prompt => "Select Model"} %> 
    </div> 

    <div class="field"> 
     <%= f.collection_select :price_front, Price.where('catogery_id' => "1").order(:name), :id, :name, {:prompt => "Select Front Tint"} %> 
    </div> 

    <div class="field"> 
     <%= f.collection_select :price_rear, Price.where('catogery_id' => "1").order(:name), :id, :name, {:prompt => "Select Side & Rear Tint"} %> 
    </div> 
    <div class="form-group"> 
     <%= submit_tag 'Submit', class: "button btn btn-primary" %> 
    </div> 
<% end %> 

フォームは美しく見え、送信後にビューを生成するように機能します。しかし、フィルターオプションはもはや機能しないことがわかりました。ユーザーはManufacturerを選択する前にModelを選択できます。私はbundle installを試して、それを動作させるために私のレールサーバを再起動しました。

私の質問ですbootstrap_form gemは製造元に基づいてモデルをフィルタリングするスクリプトで動作しますか？ブートストラップCSSで動作するようにスクリプトを移植できる方法はありますか？

詳細情報： は、これは私がapplication.js

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require_tree . 
//= require bootstrap 

のために、私は私が何を意味するか説明するために、以下の画像を追加した持っているものです。

Answer 1

私がbootstrap_form GEMを使用すると、ブートストラップがIDを変更したようです。以下に示す正しいスクリプト。

jQuery -> 
    $('#_model_id').parent().hide() 
    models = $('#_model_id').html() 
    $('#_manufacturer_id').change -> 
     manufacturer = $('#_manufacturer_id :selected').text() 
     options = $(models).filter("optgroup[label='#{manufacturer}']").html() 
     if options 
      $('#_model_id').html(options) 
      $('#_model_id').parent().show() 
     else 
      $('#_model_id').empty() 
      $('#_model_id').parent().hide()