JSFiddle - React, Tailwind, and code Playground

by stefanu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<select id="test" name="test" data-live-search="true" >
<button id="load" >Load data</button>

JavaScript

var jData = {"data":[
  {"label":"Option 1","value":"1"},
  {"label":"Option 2","value":"2"},
  {"label":"Option 3","value":"3"},
  {"label":"Option 4","value":"4"},
  {"label":"Option 5","value":"5"}]
};

// uncomment this line to reproduce the problem
$('#test').attr('title', 'test title');

// simulate a dynamic data load
$('#test').find('optgroup').remove();
$('#test').find('option').remove();

jData.data.forEach(function (o) {
  o.option = $('<option/>').attr('value', o.value).text(o.label).appendTo($('#test'))[0];
});

$('#test').selectpicker('destroy').selectpicker().selectpicker('val', '2');
console.log('value after selectpicker(\'val\', \'2\') : ' + $('#test').val());

$('#test').find('option[value=2]').attr('selected','selected');
console.log('value after attr(\'selected\',\'selected\') : ' + $('#test').val());
  
window.setTimeout(function() {
  console.log('value after delay : ' + $('#test').val());
}, 1000);