CODEWITHSUNDEEP
jquery-select2
asmij kun
asmij kun

Reputation: 25

When I create a dynamic dropdown using select2 it breaks

I have a table which has the column "genre" which has a select box which is populated using Select2, and I have a button which adds a new row to the table, once I add a new row to the table, I try to populate the Genre using select2 as well but its buggy, it results in the new select dropdown not being selectable.

Have a look at my JSFiddle here: https://jsfiddle.net/hm3w7jtz/3/

In order to get to the bug, Add a new group and then you will notice that the new row genre is not selectable.

https://jsfiddle.net/szjd6gu4/2/

Code

   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
   </head>
   <h3> Movies </h3>
    <table class="my_table" id="movies" border="1px" style="border-collapse: collapse;">
    <thead>
      <tr><b>
        <td>Group</td>
        <td>Genre</td>
        <td>Movie Name</td>
        <td>Imdb</td>
        <td>Rotten Tomato</td>
        <td>Lead Actress</td>
        <td>Lead Actor</td>
        <td>Year of Release</td>
        <td>Revenue</td>
        <td>Budget</td>
      </tr></b>
    </thead>

    <tbody>
    <tr class="group-row">
    <td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="group" style="float:right;">+</button>
    </td>
    <td><select id="genre" class='genre' style="width:150px;"></select></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="10" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    </tr>
    </tbody>
  </table>
  <script>
    $(document).ready(function() {
    var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];
     $(".genre").select2({
        data: genre
      });
  });

  var row ="<td class='nr'><input type='text' placeholder='' size='9'><button id='btn' class='group' style='float:right;'>+</button></td><td><select id='genre' class='genre' style='width:150px;'></select></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='10' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td>";  


const $groupRow = $("<tr>", {
  class: "group-row"
}).append(row);

const tableBody = $("#movies tbody");
tableBody.on('click', '.group', (e) => {
  tableBody.append($groupRow.clone());
      $(".genre").select2({
        data: genre
      });
});
  </script>

Upvotes: 0

Views: 201

Answers (1)

Mannyfatboy
Mannyfatboy

Reputation: 449

There are 2 problems with your code:

1) Remove id="genre" from both of your Selects

<select id="genre" class='genre' style="width:150px;"></select>

2) You need to move the line with the Array right before the $(document).ready function:

//BEFORE
    $(document).ready(function() {
    var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];
     $(".genre").select2({
        data: genre
      });
  });

//AFTER
var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];

$(document).ready(function() {            
         $(".genre").select2({
            data: genre
          });
      });


var genre = ['Action', 'Adventure', 'Fantasy', 'Anime', 'Romance'];
    $(document).ready(function() {
    
     $(".genre").select2({
        data: genre
      });
  });
  
  var row ="<td class='nr'><input type='text' placeholder='' size='9'><button id='btn' class='group' style='float:right;'>+</button></td><td><select class='genre' style='width:150px;'></select></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='10' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td><td><input type='text' size='7' placeholder=''></td>";  


const $groupRow = $("<tr>", {
  class: "group-row"
}).append(row);

const tableBody = $("#movies tbody");
tableBody.on('click', '.group', (e) => {
  tableBody.append($groupRow.clone());
  
      $(".genre").select2({
        data: genre
      });
});
   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
   </head>
   <h3> Movies </h3>
    <table class="my_table" id="movies" border="1px" style="border-collapse: collapse;">
    <thead>
      <tr><b>
        <td>Group</td>
        <td>Genre</td>
        <td>Movie Name</td>
        <td>Imdb</td>
        <td>Rotten Tomato</td>
        <td>Lead Actress</td>
        <td>Lead Actor</td>
        <td>Year of Release</td>
        <td>Revenue</td>
        <td>Budget</td>
      </tr></b>
    </thead>

    <tbody>
    <tr class="group-row">
    <td class="nr"><input type="text" placeholder="" size="9"><button id="btn" class="group" style="float:right;">+</button>
    </td>
    <td><select class='genre' style="width:150px;"></select></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="10" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    <td><input type="text" size="7" placeholder=""></td>
    </tr>
    </tbody>
  </table>

Upvotes: 1

Related Questions