how to convert html select to bootstrap select?

Question

I'm using Bootstrap in my web application and new to it. And I have a question about how to convert a normal html select to a bootstrap select.

I need to populate a div with a bootstrap select using ajax after the entire page has been rendered, but the select I returned is a normal html select. I tried to call render, refresh method of selectPicker to render it as bootstrap select, but it didn't work.See my normal html select

Very appreciate if anyone can help me. Thanks.

Answer 1

Add this script after you append your select element HTML in your ajax call.

$('#form-SchemeUUID').selectpicker({
  style: 'btn-info'  
});

Also make sure the CSS and Js files of the plugin is added into the page.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>