Блог

Я пытаюсь скопировать некоторые из моих полей с помощью выбранного выпадающего окна для клонирования и добавления с помощью jq. Все работает нормально. Но он не копирует выпадающий список choose.

HTML —

 <div class="form-group row">
 <div class="col-md-12">
  <table width="100%" cellspacing="15" class="order-table"> 
   <thead>
    <tr>
     <th width="50%">Product</th>
     <th width="50%">Quantity</th>
   </tr>
   </thead>
   <tbody>
     <tr class="clone-class">
       <td>
         <select name="productId[]" class="form-control chosen-select chosen" style="width: 100%;" 
            data-placeholder="Select">
            @foreach($product as $p)
              <option value="{{$p->id}}">{{$p->name}}</option>
            @endforeach
         </select>
       </td>
       <td>
        <input name="quantity[]" type="number" class="form-control" required>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
       <a class="btn btn-primary add-more-btn float-sm-right">Add</a>
    </div>
  </div>
  

Js —

 $(document).ready(function(){
    var clone = $('.clone-class').clone(true);
    console.log(clone);
    $('.clone-class select').chosen();

    jQuery('.add-more-btn').click(function() {
        var parent = jQuery('.clone-class').last();
         clone.clone(true).insertAfter(parent); 
         $('.clone-class:last select').chosen();
    }); 
});
  

При нажатии кнопки добавить он копирует ожидаемые поля, но не раскрывающийся список, как ожидалось.

Заранее благодарю вас за помощь.

Это может быть вызвано chosen-select chosen классом.

Я попробовал ваш код на codepen . Просто удалите эти классы из <select> и добавьте data-live-search="true" .

Итак, ваш код будет —

 <div class="form-group row">
 <div class="col-md-12">
  <table width="100%" cellspacing="15" class="order-table"> 
   <thead>
    <tr>
     <th width="50%">Product</th>
     <th width="50%">Quantity</th>
   </tr>
   </thead>
   <tbody>
     <tr class="clone-class">
       <td>
         <select name="productId[]" class="form-control" style="width: 100%;" 
            data-placeholder="Select" data-live-search="true">
            @foreach($product as $p)
              <option value="{{$p->id}}">{{$p->name}}</option>
            @endforeach
         </select>
       </td>
       <td>
        <input name="quantity[]" type="number" class="form-control" required>
       </td>
      </tr>
     </tbody>
    </table>
   </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
       <a class="btn btn-primary add-more-btn float-sm-right">Add</a>
    </div>
  </div>
  

И тот же код js.
Кроме того, проверьте рабочий codepen.