3

私はこれでフォームを持っていますcollection_select

    <%= collection_select :bmp, :bmpsublist_id,
                          Bmpsublist.where(:bmplist_id => @bmp.bmp_id), :id,
                          :name,{ :required => false, 
                          :selected => @bmp.bmpsublist_id, } %>

これの値を取得collection_selectして、同じフォームで下に移動して、別のリストを表示するときにどのリストを使用する必要があるかを確認できるようにしたいと思いますcollection_select

この部分的な擬似コードのようなもの:

if earlier result == 2 then
  use this list: Irrigation.where(:id != 8)
else
  use this other list: Irrigation.all

そして、collection_select を更新します。

<%= collection_select :bmp, :irrigation_id, the_chosen_list_from_above, :id, :name, 
                            {:prompt => 'Select Irrigation Type'}, {:required => true} %>

どうやってやるの？

4

2 に答える 2

2

あなたの質問に基づいて、コレクションの値をクエリして適用するには、静的と動的の 2 つの方法があります。

ERB ビューがレンダリングされるときに静的が発生し、ページが最初にレンダリングされてロードされるときにロジックが適用されます。動的は、ページが読み込まれた後、ユーザーがページ上の要素を操作するときに発生します。どのアプローチを選択するかは、アプリケーションの設計とユーザーとの対話の意図したレベルに完全に依存します。

静電気検出

選択したアイテムは初期の で既に指定しているcollection_selectため、後のコードでそれを再利用できます。疑似コードの例に基づいて、これを試してください。

<% if @bmp.bmpsublist_id == 2 %>
  <% irrigation_list = ["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking"] %>
<% else %>
  <% irrigation_list = ["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking", "Pads and Pipes - Tailwater Irrigation"] %>
<% end %>
<%= select :bmp, :irrigation_id, options_for_select(irrigation_list),
           { :prompt => 'Select Irrigation Type'}, { :required => true } %>

なぜこれが機能するのですか？イニシャルの:selectedオプションは、最初collection_selectに選択するオプションを指定する場所です。通常、この値はモデル値から取得されるため、実際のコレクション値とは別のパラメーターで提供されます。つまり、Rails の規則に固執しているおかげで、キューに入れられて準備ができています。

後続のselectコードは HTML<select>要素を作成し、 を使用してoptions_for_selectオプションの配列を HTML<option>要素に変換します。このようにして、元のどの要素が選択されたかに基づいて、オプションの可変リストを使用して選択できますcollection_select。

何よりも良いこと: 静的なアプローチでは、これを行うために Javascript (または jQuery) に立ち入る必要はありません。ERB テンプレート (または、それがあなたのバッグの場合は HAML テンプレート) によって直接レンダリングされます。

動的検出

実際に動的な動作が必要な場合は、Javascript / jQuery にドロップして実行できます。次のように、すべてのオプションでselect初期化することを除いて、静的アプローチ (上記) と同じように「灌漑タイプ」を作成できます。

<%= select :bmp, :irrigation_id, 
           options_for_select(["Sprinkle", "Furrow/Flood", "Drip", "Furrow Diking", "Pads and Pipes - Tailwater Irrigation"]),
           { :prompt => 'Select Irrigation Type'}, { :required => true } %>

次に、ビューに関連付けられた Javascript ソースを編集します (これを と呼びましょうProduct)。を開きますapp/assets/javascripts/product.js(CoffeeScript を使用している場合product.coffeeは、同じディレクトリにあるファイルです)。

その Javascript ファイルを編集して、次のコードを含めます。

function OnProductEditForm() {
    // Edit the selectors to match the actual generated "id" for the collections
    var bmp_collection = $("#product_bmp");
    var drip_collection = $("#product_irrigation_type");
    var drip_option = drip_collection.find("option")[2];

    function select_available_drip_options() {
        var value = bmp_collection.val();

        if (value == 2) {
            drip_option.attr("disabled", "disabled");
        } else {
            drip_option.removeAttr("disabled");
        }
    }

    bmp_collection.change(function() {
       select_available_drip_options();
    });

    select_available_drip_options();
}

changeこれにより、コレクションの HTML 要素が識別され、イベント ハンドラーがインストールされます。idコードのコメントに従って、コレクション要素の を確認する必要があります。残りはそこから行われます。コレクションが変更される (新しい値が選択される) と、イベント ハンドラーは、選択に応じて、3 番目の選択<option>( として指定)を表示または非表示にします。find("option")[2]#product_bmp

次に、app/views/products/_form.html.erb で、ファイルの最後にこれを含めます。

<script>
    jQuery(document).ready(OnProductEditForm);
    // Uncomment the next 2 lines for TurboLinks page refreshing
    //jQuery(document).on('page:load', OnProductEditForm);
    //jQuery(document).on('page:restore', OnProductEditForm);
</script>

これにより、ページの読み込み時にメソッドが自動的に読み込まOnProductEditFormれ、前述のイベント ハンドラーがインストールされます。TurboLinks は標準とは無関係にページ読み込みのイベントを開始するため、TurboLinks を有効にしている場合は最後の 2 行が必要であることに注意してください$(document).ready。

それだけです。動的動作の追加はとても簡単です。

于 2016-07-01T08:54:32.283 に答える