javascript - bootstrap selectjs 不适用于动态附加值

Question

为什么 bootstrap selectjs 不适用于动态附加值。

每当我从 javascript 附加新选项时，它都不会反射(reflect)到实时搜索中。

下面是代码片段

setTimeout(function(){
  $('#demo').append('<option>India</option>');
  console.log('appended');
},1000);

<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"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select id="demo" class="selectpicker" data-live-search="true" >
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>
</select>

Answer 1

您的方法是附加列表需要的新选项 refreshed添加新元素后。另请注意，有一个 display:none 设置为默认 HTML 选择标记

setTimeout(function() {
  $('#demo').append('<option>India</option>').selectpicker('refresh');
  console.log('appended');
}, 1000);

<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select id="demo" class="selectpicker" data-live-search="true">
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>
</select>