JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<select class="selectpicker">
</select>
<br>
<input class="i"> <input class="v"> <button class="s">save</button>
JavaScript
$(document).ready(function () {
var $picker = $('.selectpicker');
$picker.selectpicker();
$picker.append('<option value="Mustard">Mustard</option>');
$picker.append('<option value="Ketchup">Ketchup</option>');
$picker.append('<option value="Relish">Relish</option>');
$picker.selectpicker('refresh');
});
$('.s').on('click', function () {
$('select.selectpicker')
.append('<option value="' + $('.i').val() + '">' + $('.v').val() + '</option>')
.selectpicker('refresh');
//$(.selectpicker).removeClass('open').selectpicker('refresh');
});