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" ></select>
<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');

$('#test').selectpicker();
$('#load').on('click', function() {
	load('2');
})

function load(value) {
	// 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', value);
  console.log('value after selectpicker(\'val\', \'' + value + '\') : ' + $('#test').val());

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