JSFiddle - React, Tailwind, and code Playground

by newblt123

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.3.5/bootstrap-select.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<select class="selectpicker" data-title="Please choose one">
</select>

JavaScript

$(document).ready(function () {
    var data = [{value: "Tomate", text: "Des bonnes tomates"}, {value: "Bananes", text: "Des bonnes bananes"}]
    createSelect(".selectpicker", data);
});

function createSelect(selector, data){
    var picker = $(selector);
    picker.selectpicker();
    
    data.forEach(function(item){
       picker.append('<option value="' + item.value + '">' + item.text + '</option>');
    });
    picker.selectpicker('setStyle', 'btn-primary', 'add');
    picker.selectpicker('refresh');
}