Как нацелить несколько элементов для добавления Select2 jQuery Библиотека - PullRequest
Новая
       28

Как нацелить несколько элементов для добавления Select2 jQuery Библиотека

0 голосов
/ 22 апреля 2020

Я пытаюсь добавить строки в таблицу, которые имеют некоторые входные теги и тег select, и я хочу инициализировать тег select с jQuery библиотекой Select2, чтобы сделать это, я нашел некоторый код, который инициализирует Select2 при добавлении Выбирайте тег только тогда, когда это просто тег выбора без какого-либо контейнера div или td. Я не очень знаком с jQuery, поэтому, пожалуйста, дайте мне знать, как я могу добавить необходимый код в: 

<tbody class="items-list">    </tbody>

Вот код, который я нашел: 

      $(function() {
        $("button").on("click", function() {
          $(".items-list").append($('<select><option>test</option><select/>'));
        });

        // select the target node
        var target = document.querySelector('.items-list');

        if (target) {
          // create an observer instance
          var observer = new MutationObserver(function(mutations) {
            //loop through the detected mutations(added controls)
            mutations.forEach(function(mutation) {
            //addedNodes contains all detected new controls
              if (mutation && mutation.addedNodes) {
                mutation.addedNodes.forEach(function(elm) {
                //only apply select2 to select elements
                  if (elm && elm.nodeName === "SELECT") {
                    $(elm).select2();
                  }
                });
              }
            });
          }); 

          // pass in the target node, as well as the observer options
          observer.observe(target, {
            childList: true
          });

    // later, you can stop observing
    //observer.disconnect();
  }
});

Как вы можете видеть, он добавляет только элемент select, а не tr, td или div, всякий раз, когда я пытаюсь добавить любой контейнер, Select2 не работает. Вот код, который я хочу добавить: 

<tr>
   <td> <span id="sr_no">'.$x.'</span> </td>
   <td>
        <div class="form-group">
            <select class="form-control select2" style="width: 100%;" id="product-name'.$x.'" name="product_name[]">
                 <option selected="selected" disabled>Select Product</option>';
                 foreach($rows as $row){ 
                    <option value="'.<?php echo $row["product_id"]; ?>.'">'.<?php echo $row["product_id"]; ?>.' | '.<?php echo $row["product_name"]; ?>.'</option>
                 <?php } ?>
             </select>
         </div>
     </td>

     <td> <input type="text" name="rate[]" id="rate1"  class="form-control"> </td>
     <td> <input type="number" name="qty[]" id="qty1" min="1" class="form-control"> </td>
     <td> <input type="text" name="amount[]" id="amount1" class="form-control"> </td>
     <td> <input type="text" name="disc[]" id="disc1" value="0" class="form-control"> </td>
     <td> <input type="text" name="total[]" id="total1" class="form-control"> </td>

     <td>
         <div class="btn-group btn-group-sm">
              <button type="button" onclick="removeRow('.$row["product_id"].')" class="btn btn-danger"><i class="fas fa-trash"></i></button>
         </div>
     </td>

</tr>

Пожалуйста, дайте мне знать, как я могу это сделать. Я буду признателен:)

...