Bootstrap selectpicker not working on multiple fields added by Javascript / JQuery

Question

Bootstrap select picker not working when loaded with jQuery /javascript dynamic fields.

When i remove selectpicker class from append function,it works but doesn't load style.

 $('select').selectpicker(); $('#add_more').click(function() { $('.testBox').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select> <br />'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <a href="javascript:void(0)" id="add_more">Add More</a> <select class="selectpicker show-tick form-control"> <option>Safari</option> <option>Chrome</option> <option>Firefox</option> </select> <br /><br /> <div class="testBox"></div> 

Answer 1

JS is not reactive in the sense that $('select') will update with all the newly added instances of <select> elements. Since $('select').selectpicker() is executed when additional select elements have not been added to the DOM, it will only apply to those that are available at runtime—which is the one that is present in the DOM at that moment in time.

In order to initialize the plugin for newly added <select> elements, you can simply create a dummy <div> element and append your <select> element to it:

var $select = $('<div />').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select>');

Now, your to-be-added element will be available as a document fragment. jQuery is able to bind events to elements in the document fragment even before it is injected into the DOM, so you can initialize the plugin right then and there. We simply search the dummy div for your <select> element:

$select.find('select').selectpicker();

When this is done, you append it to your DOM:

$('.testBox').append($select);

See proof-of-concept example below:

 $('select').selectpicker(); $('#add_more').click(function() { // Create dummy div that houses select element var $select = $('<div />').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select>'); // Initialize plugin in <select> element found in document fragment $select.find('select').selectpicker(); // Append document fragment to your DOM $('.testBox').append($select); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <a href="javascript:void(0)" id="add_more">Add More</a> <select class="selectpicker show-tick form-control"> <option>Safari</option> <option>Chrome</option> <option>Firefox</option> </select> <br /><br /> <div class="testBox"></div>