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 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);
             }
         }
     );
 });