Uncaught TypeError: toUpperCase is not a function when binding option dynamically to data-tokens bootstrap

Question

when I bind data dynamically to option data token using jquery its throwing toUpperCase is not a function error

when I tried running by statically passing option value in HTML itself it's working fine. but when binded dynamically its throwing error

<div class="col-sm-3">
  <select class="form-control selectpicker" id="select-fund"
                                                    data-live-search="true">
   <!-- <option data-tokens="china">China</option>
   <option data-tokens="malayasia">Malayasia</option>
   <option data-tokens="singapore">Singapore</option> -->
   </select>
   </div>

$(document).ready(function () {
    // $(function () {
    //     $('.selectpicker').selectpicker();
    // });
    // $('.selectpicker').selectpicker();
    temp = { "1": "hello", "2": "world" }
    $.each(temp, function (key, value) {
        $('.selectpicker').append('<option data-tokens= ' + key + '>' + value + '</option>');
    });
    $('.selectpicker').val();
});

Answer 1

When you add selectpicker class by default the selectpicker component will be initialized by default then you can't add the dynamic option, you must add the options then initialize the component.

So remove the class and use the identifier, something like :

$(document).ready(function() {
  temp = {
    "1": "hello",
    "2": "world"
  }
  $.each(temp, function(key, value) {
    $('#select-fund').append('<option data-tokens= ' + key + '>' + value + '</option>');
  });
  $('#select-fund').selectpicker();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" />
<div class="col-sm-3">
  <select class="form-control" id="select-fund" data-live-search="true">
  </select>
</div>