2

次のコードで動的選択を実装しようとしています。私は製品を持っていますが、製品には多くのバッチ番号があります。製品に関連付けられたバッチを選択するとすぐに、表示されるはずがありません。フォームの詳細は以下の通りです。

<div class ="prod"><%= f.association :product, :collection => Product.in_stock %> </div><br/>

<div class ="batch"><%= f.grouped_collection_select :batch_no, Product.in_stock, :store_opening_stocks, :title, :batch_no, :batch_no, :prompt => "Select Batch"%></div>

フォームのjqueryは次のとおりです

jQuery(document).ready(function(){
  var child = jQuery('.batch').html();
  jQuery('.prod').change(function() {
   var parent = jQuery('.prod :selected').text();
   var escaped_parent = parent.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')  
    var options = jQuery(child).filter("optgroup[label='#{escaped_parent}']").html()
     if (options) {
      jQuery('.batch').html(options);
      return jQuery('.batch').parent().show();
    } else {
      jQuery('.batch').empty();
    }
   });
});

問題はoptionsnullを返すことです。これは、私が行ったときにalert(options)nullを表示していることがわかりました。誰でも私を正しい方向に向けることができますか?? 私の仕事を達成できる他の方法はありますか？前もって感謝します ：）

4

4 に答える 4

5 
jQuery(document).ready(function(){
  var child = jQuery('.batch').html();
  jQuery('.prod').change(function() {
   var parent = jQuery('.prod :selected').text();
   /* var escaped_parent = parent.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1') */  
    var options = jQuery(child).filter("optgroup[label='" + parent + "']").html()
     if (options) {
      jQuery('.batch').html(options);
      return jQuery('.batch').parent().show();
    } else {
      jQuery('.batch').empty();
    }
   });
});

これはあなたに魔法をかけますか？

コントローラーへの ajax 呼び出しを実行して一連のオプションを返し、返されたオプションでバッチを埋める方がクリーンな場合があります。

何かのようなもの

var data = {
  product_id: jQuery('.prod :selected').attr("data-id")           
}
jQuery.ajax({
  url: controller/get_batch,
  type: 'GET',
  dataType: 'script',
  data: data
});

あなたが置くget_batch.jsで

jQuery('.batch').html(<%= escape_javascript(render :partial => "select_box_for_batch") %>);

コードは完全ではありません。製品の選択などに ID を追加する必要がありますが、理解できると思います。

編集：簡単な例でリポジトリを作成しました

于 2012-06-26T09:55:44.673 に答える
1

いくつかの努力の後、これは私のために働いています....しかし、これよりも優れた他の答えは大歓迎です。私はajax呼び出しとそれをコントローラーなどに接続する方法についてあまり知らないので... jqueryのみで変更しました。

これがコードです。

        jQuery(document).ready(function(){
      var batchNo = jQuery('.batch').html();
      jQuery('.prod').bind('change',function() {
      var  productSelected = jQuery('.prod :selected').val();
    var options = jQuery(batchNo).find("optgroup[label='" + productSelected + "']").html();
   ;  if (options) {
      jQuery('.batch select').html(options);
      return jQuery('.batch').parent().show();
    } else {
      jQuery('.batch').empty();
    }
    });
 });
于 2012-07-31T11:12:16.317 に答える
1

div含まれているタグでクラスセレクターを使用することでつまずいているようです。

具体的には、の目標はタグvar childの配列を返すことです。option理想的にはID、フォーム ビルダーが各要素に割り当てる属性を使用する必要があります。フォームを開いた方法がわからない場合 (つまり、親モデルがわからない場合)、open ステートメントが次のようになっているとします。

<%= form_for @product_batch do |f| %>

これにより、フィールドproductと batch_no選択フィールドは次のようになります。

<select name="product_batch[product_id]" id="product_batch_product_id">
<select name="product_batch[batch_no]" id="product_batch_batch_no">

これで、次のように jQuery をリファクタリングできます。

jQuery(function() {
  var child = $('#product_batch_batch_no').html();
  $('#product_batch_product_id').live("change", function() {
    var escaped_parent, parent, options;
    parent = $('#product_batch_product_id :selected').text();
    escaped_parent = parent.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(child).filter("optgroup[label='" + escaped_parent + "']").html();
    $('#product_batch_batch_no').html(options);
  });
});

コードの最後のビット:

if (options) {
  jQuery('.batch').html(options);
  return jQuery('.batch').parent().show();
} else {
  jQuery('.batch').empty();
}

文字通り破壊的です。製品に が含まれていない場合、batch_nojQuery('.batch').empty();内部の html が削除されます:

<div class="batch"></div>

削除すると、このコードはなくなります...これはおそらくあなたが望むものではありません.

とにかく、これは動的選択ボックスを実装するための優れた目立たない方法であるという Ryan Bates の意見に同意します。http://railscasts.com/episodes/88-dynamic-select-menus-revisedで改訂された RailsCast をチェックアウトすることをお勧めします。

頑張ってください！

于 2012-08-02T00:44:29.527 に答える