從選擇菜單中用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 recipients for $65，我想部分位於/transcripts/products/recipients/select-recipient加載兩次到的div #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); 
      } 
     } 
    ); 
});