Bootstrap selectjs arbeitet nicht für dynamisch angehängten Wert

Question

Warum bootstrap selectjs ist nicht für dynamisch angehängten Wert arbeiten.

wenn ich anhängen neue Option aus javascript es nicht auf die Live-Suche widerspiegelt.

unten ist Code-Schnipsel

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

Verwenden refresh Methode die Picker mit Ihrer neuen beigefügten Option zu aktualisieren.

$('#demo').selectpicker('refresh'); 

Referenz:

https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerrefresh

Answer 2

Ihr Ansatz ist die neue Option Anfügen der Liste sein müssen refreshed nach neuen element.Also anhängt beachten Sie, es ist ein display:none Satz HTML-Standard wählen Tag

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>