0

cannot incorporate my cloning code with select2 jquery. upon submission of form the data from dropdown select is being passed to database. but when i added the select2 jquery in my dropdown select it does not pass the data into my database anymore.

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<table>
  <tr class="tr_clone">
    <td>
      <input type="button" name="add" value="clone row" class="tr_clone_add" /><br><br>
      <select name="animal" class="select2">
        <option value="cow">cow</option>
        <option value="horse">horse</option>
        <option value="dog">dog</option>
        <option value="cat">cat</option>
      </select>
      &nbsp;
      <select name="vehicle" class="select2">
        <option value="car">car</option>
        <option value="ship">ship</option>
        <option value="plane">plane</option>
      </select>
      &nbsp;
      <input name="remarks" type="text">
      <br>
      <hr>
    </td>
  </tr>
</table>

<script>
  $(document).ready(function() {
      $('.select2').select2();
  });
</script>

<script>
$(document).on("change", "select", function() {
  var val = $(this).val(); 
  $("option", this).removeAttr("selected").filter(function() {
    return $(this).attr("value") == val;
  }).first().attr("selected", "selected");
});
$('body').on('click', 'input.tr_clone_add', function() {
  var $tr = $(this).closest('.tr_clone');
  var $clone = $tr.clone();
  $clone.find('.form-control js-example-basic-single').val('');
  $tr.after($clone);
});
</script>

What i wanted to happen is upon submission of form all data will be submitted.

Minas
  • 13
  • 3
  • If I understand correctly, you are having trouble cloning a `select2`? There are many other answers here describing how to do that, have you seen those? https://stackoverflow.com/questions/17175534/cloned-select2-is-not-responding Another issue is you have included 2 different versions of jQuery - they will clash. You should only include 1 version. – Don't Panic Jan 16 '23 at 01:33
  • I've seen the link you included, it's just that in the example given there is it removes the selected option in dropdown list upon cloning. I wanted to retain the dropdown list upon cloning. – Minas Jan 16 '23 at 02:30

0 Answers0