1

3つの選択ドロップダウンメニューで始まるフォームを作成しようとしています。かなり標準的-

The selection of drop down 1 populates the options in drop down 2

それで、

The selection of drop down 2 populates the options in drop down 3

sled私はここで同様の質問に対するの答えに従いました、 https： //stackoverflow.com/a/6864321/766817しかし、私は（彼の例を使用して）ミックスに3番目の要素を追加する方法を理解できません。これが私がこれまでに持っているものです...

_form.html.erb

<%= select_tag  :first_select,
("<option>Product Grade...</option>" + options_from_collection_for_select(@product_grades, "id", "product_grade")).html_safe,
  :'data-remote' => 'true',
  :'data-url' => url_for(:controller => 'product_grades', :action => 'getdata'), 
  :'data-type' => 'json'
%>

<%= select_tag  :second_select,
  :'data-remote' => 'true',
  :'data-url' => url_for(:controller => 'vendors', :action => 'getdata'), 
  :'data-type' => 'json'
%>

<%= select_tag :third_select %>

application.js

$('#first_select').live('ajax:success', function(evt, data, status, xhr) {

  var selectbox2 = $('#second_select');

  selectbox2.empty();

  $.each(data, function(index, value) {
    var opt = $('<option/>');

    opt.attr('value', value[0]);
    opt.text(value[1]);
    opt.appendTo(selectbox2);
  });
});


$('#second_select').live('ajax:success', function(evt, data, status, xhr) {

  var selectbox3 = $('#third_select');

  selectbox3.empty();

  $.each(data, function(index, value) {
    var opt = $('<option/>');
    opt.attr('value', value[0]);
    opt.text(value[1]);
    opt.appendTo(selectbox3);
  });
});

そして最後に、私はとのgetdata両方でアクションを持っていますProductGradesControllerVendorsController

ProductGradesController

def getdata
  @data_from_select1 = params[:first_select]
  @data_for_select2 = Vendor.where(:product_grade_id => @data_from_select1).all
  render :json => @data_for_select2.map{|c| [c.id, c.vendor_name]}
end

VendorsController

def getdata
  @data_from_select2 = params[:second_select]
  @data_for_select3 = ItemCode.where(:vendor_id => @data_from_select2).all
  render :json => @data_for_select3.map{|a| [a.id, a.item_code]}
end

現在、最初の2つのステップは機能しますが、3番目のステップでは選択ボックスが生成されますが、最初の2つのステップからオプションを選択するとデータが入力されません。

私はjQueryAJAXクエリなどにかなり慣れていないので、そこで何か間違ったことをしていると確信していますが、何かアイデアはありますか？ありがとう！！

4

1 に答える 1

0

さて、将来同様の問題に遭遇した人のために、私は実際に別のルートを取ることになりました...

これらのドロップダウンが処理するデータの量はそれほど多くないので、実際には、これに対する非AJAXのアプローチをjQuery Chained（https://github.com/tuupola/jquery_chained）と呼ばれるjQueryプラグインと統合しました。

これは、前のドロップダウンで行った選択に応じて、ドロップダウンオプションを有効/無効にするだけです。ドロップダウンに大量のdbデータが入力されている場合、またはオプションがDOMに追加/削除されるため、ドロップダウンの表示にセキュリティレイヤーが必要な場合、これはあまり良い解決策ではありません。ソースコードを表示することで、誰かがすべてのデータを簡単に確認できるようになります。

HomeOnRailsブログには、このjQueryチェーンプラグインをRailsアプリに統合する方法に関するすばらしい投稿があります。（http://homeonrails.blogspot.com/2012/01/rails-31-linked-dropdown-cascading.html）

楽しんで頑張ってください！

于 2012-08-24T17:08:50.323 に答える