Question

我正在尝试克隆DIV X次，其中X由下面的Select字段给出。

HTML：

 <div class="col-xs-4">
       <label>Labels</label>
       <div  class="selector">
          <select id='kids-1'  name="box[0][label]" class="full-width">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             >
          </select>
       </div>
    </div>

我需要克隆X次的HTML Select字段（X由上面的选择给出）

<!-- Label Size-->
<div class="col-xs-4">
   <label>Label 1</label>
   <div class="selector validation-field">
      <select class="full-width" name="box[0][size][]" id='size-1'>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="6">6</option>
         <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>
         <option value="11">11</option>
      </select>
   </div>
</div>
<!-- End-->

我在互联网上搜索过。我目前正在阅读一些文档。

如果你能提供一些例子，我可以指导我会很棒。

Answer 1

＆＃13;

(function($) {
  $(function() {
    var $select = $('#kids-1'),
        $container = $('.the-container'),
        $to_clone = $('.to-clone').html();

    $select.change(function(e) {
      $('.inner-clone').remove();
      for (var i = 0, max = parseInt($select.val(), 10); i < max; i += 1) {
        $container.append($to_clone);
      }
    });
  });
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="the-container">
  <div class="col-xs-4 main-parent">
    <label>Labels</label>
    <div class="selector">
      <select id='kids-1' name="box[0][label]" class="full-width">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        >
      </select>
    </div>
  </div>

  <!-- Label Size-->
  <div class="to-clone">
    <div class="col-xs-4 inner-clone">
      <label>Label 1</label>
      <div class="selector validation-field">
        <select class="full-width" name="box[0][size][]" id='size-1'>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
        </select>
      </div>
    </div>
  </div>
  <!-- End-->
</div>

＆＃13;

选择时重复div

1 个答案: