CODEWITHSUNDEEP
javascriptjquerycssbootstrap-4html-select
Honey Singh
Honey Singh

Reputation: 327

Javascript added multiple Bootstrap Select div not working

I am using Bootstrap to design my pages. I am following this page http://skote-light.node.themesbrand.com/form-advanced to create a Multiple Select.

<script src="~/assets/js/pages/form-advanced.init.js"></script>

<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>

<div id="add-more">Add More<div>

the output to this is enter image description here

The requirement is i need to have an add more button, to add more multiple select. So what I did is

$("#add-more").click(function () {
    $("#add-more").before(
`
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`

The problem is that when I am trying to append using JavaScript the multiple select behaves this way enter image description here i.e. the bootstrap properties is not applied to it.

Most probably while appending using JavaScript, it is not able to use the JavaScript script.

Please help me to fix this issue. Thanks.

Upvotes: 3

Views: 407

Answers (2)

Honey Singh
Honey Singh

Reputation: 327

WORKING CODE

window.onload = function () {
// no need to initialize here.
//$('.select2-multiple').select2();
});


$("#add-more").click(function () {
    $("#add-more").before(
`
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`);

//$('.select2-multiple:last').select2();

//initialize here instead
$('.select2-multiple').select2();
});

Upvotes: 0

Swati
Swati

Reputation: 28522

You need to initialize select2 which is added dynamically for that you can simply use $('.select2-multiple:last').select2() this will search for select-box that is last and initialize it .

Demo Code :

$(".select2-multiple").select2();
$("#add-more").click(function() {
  $("#add-more").before(
    `
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`)
  //initialize selct2 which is added last
  $('.select2-multiple:last').select2();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div class="row mt-3">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
      <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
        <option value="SG">Singapore</option>
        <option value="CH">China</option>
        <option value="CA">California</option>
      </select>
    </div>
  </div>

  <div id="add-more">Add More
    <div>

Upvotes: 2

Related Questions