Uncaught TypeError: toUpperCase не является функцией при динамическом связывании опции с начальной загрузкой токенов данных

Question

когда я динамически привязываю данные к токену данных опции, используя jquery, его выбрасывание toUpperCase is not a function error

когда я пытался запустить статическую передачу значения параметра в сам HTML, он работал нормально. но при динамическом связывании выдает ошибку

<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

Когда вы добавляете selectpicker класс по умолчанию, компонент selectpicker будет инициализирован по умолчанию, тогда вы не можете добавить динамический параметр, вы должны добавить параметры, а затем инициализировать компонент.

Поэтому удалите класси использовать идентификатор, что-то вроде:

$(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>