CODEWITHSUNDEEP
javascripthtmljqueryjquery-select2
HarLton Hinon
HarLton Hinon

Reputation: 45

Javascript multiple select2 doesn't work on click event

I want to click button to create an multiple selectbox(select2).

Each button click will create a select box with select2 function libraries.

My code will appear only a simple selectbox.

 $('.main_select2').select2({
    placeholder: 'Selection Box',
    allowClear: true
  });
$('#add_select').on('click', function() {
    $('.for_select').append( 
    '<div class="c-input c-input--select c-input--icon">'
          + '<select class="select2 main_select2">'
          + '<option>Choose 1</option>'
          + '<option>Choose 2</option>'
          + '<option>Choose 3</option>'
          + '</select>'
      + '</div>');
  })
.main_select2{
  width:200px;
  margin-top:10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>

<button type="button" id="add_select">Add Select2</button>
<div class="for_select">
  <div class="c-input c-input--select c-input--icon">
      <select class="select2 main_select2">
          <option>Choose 1</option>
          <option>Choose 2</option>
         <option>Choose 3</option>
      </select>
  </div>
</div>

Is there any possible ways to do this with multiple class in select2.

Thanks

Upvotes: 0

Views: 1237

Answers (1)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14510

You need to initialise your select as a Select2, just as you would for one that exists on page load. Your code appends a new select, but it doesn't initialise it as a Select2.

Here's a working snippet. I've added a hidden CSS class to your first, base select, since you probably don't want that visible.

let count = 0;                         // Track how many copies we have
let $template = $('.c-input--select'); // The HTML you want to copy each time
let $container = $('.for_select');     // Where the copies should be added

$('#add_select').on('click', function() {

    // Increment our counter
    count++;

    // Create a copy of your base HTML/select
    let $copy = $template.clone();
    
    // Find the select in the div, and give it an id so we can find it
    $copy.find('select').attr('id', count);
 
    // Append it
    $container.append($copy);
    
    // Initialise it as a select2, using the id we just gave it to find it
    $('#' + count).select2();
});
.hidden {
    display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>

<button type="button" id="add_select">Add Select2</button>
<div class="for_select">
  <div class="c-input c-input--select c-input--icon">
      <!-- add hidden class so the template is not visible -->
      <select class="select2 main_select2 hidden">
          <option>Choose 1</option>
          <option>Choose 2</option>
         <option>Choose 3</option>
      </select>
  </div>
</div>

Upvotes: 1

Related Questions