javascript - 選択メニューからJQueryを使用して部分を複数回レンダリングする

Question

ユーザーが製品を選択できる選択メニューがあります。

%fieldset
      %legend
        Select a Product
      %ul.input_group
        %li
          %label{:for => "product"}
            Product
          %select#product
            %option
              Please Select
            %option
              2 recipients fo $65
            %option
              4 recipients for $100
            %option
              8 recipients for $150

ユーザーがを選択した場合、2回に配置されたパーシャルをdiv2 recipients for $65にロードしたいと思います。私がこれをしたい別の言葉：/transcripts/products/recipients/select-recipient#recipient-list

#recipient-list
  .recipient
    ...
  .recipient
    ...

他のオプションが選択されている場合は、このdivが適切な数のアイテムで応答するようにします。

このためのJQueryをどのように作成しますか。

Answer 1

次のようなことを試してください：

$('#product option:selected').each(function(index, product)) {
  $('#recipient-list').append($.get('/transcripts/products/recipients/select-recipient/' + product.val()));
}

次に、オプションを次のように変更します

%fieldset
  %legend
    Select a Product
  %ul.input_group
    %li
      %label{:for => "product"}
        Product
      %select#product
        %option
          Please Select
        %option{value: "2"}
          2 recipients fo $65
        %option{value: "4"}
          4 recipients for $100
        %option{value: "8"}
          8 recipients for $150

Answer 2

私はあなたがこのようなものを探していると思います:

 $('#product').on('change', function() {
     var val = parseInt($(this).text(), 10);
     if (val < 1) {
         $('#recipient-list').empty();
         return;
     }

     $('#recipient-list').load('/transcripts/products/recipients/select-recipient',
         function() {
             var copy = $(this).children().clone();
             while (val-- > 1) {
                 $('#recipient-list').append(copy);
             }
         }
     );
 });