从选择菜单中用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); 
      } 
     } 
    ); 
});