Bootstrap-select - selectpicker 類下拉列表未顯示

Question

我正在處理的代碼使用 JQuery 來允許用戶單擊一個按鈕，該按鈕生成包含一些表單對象的行。 我希望這些對象之一是可搜索的下拉列表，使用Bootstrap-Select 。

行生成得很好，但是無論我做什么，在設置 selectpicker 時都不會顯示下拉列表：

<select class="selectpicker form-control">

請注意，當我從類中刪除“selectpicker”時，下拉列表顯示得很好，但當然它只是一個標准的引導程序，不可搜索。

請參閱下面的代碼，我還創建了一個JSFiddle

我究竟做錯了什么？

<div class="container">
<div class="col">
    <button type="button" value="Add a field" class="btn btn-primary" id="add">Add row</button>
    <br><br><br>
        <div id="sortable">
          <!-- Filled by JS -->
        </div>
</div>
</div>       

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
    

<!-- Make form sortable using drag and drop -->
<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>

<!-- Create form -->
<script>
$(document).ready(function() {
    
 
    // Add row functionality
    $("#add").click(function() {
        var exer_ids = ["1", "2", "3"];
        var exer_desc_pls = ["Option 1", "Option 2", "Option 3"];
        var intId = $("#sortable div").length + 1;
        var fieldWrapper = $("<div class=\"form-row\" id=\"field" + intId + "\"/>");
        var name = $("<div class=\"form-group col-md-4\"/>");
        var options = "<select class=\"selectpicker form-control\" data-live-search=\"true\"><option selected disabled>Pick option...</option>";
               
        var i;
        for (i=0; i < exer_ids.length; i++) {
            options += "<option data-tokens=\"" + exer_ids[i] + "\">" + exer_desc_pls[i] + "</option>";
        };
        
        options += "</select>";
        
        var url = $("<div class=\"form-group col-md-4\"><input type=\"text\" name=\"url\" placeholder=\"Paste here the URL of the Image\"class=\"form-control\"></div>");
        var removeButton = $("<div class=\"form-group col-md-1\"><button type=\"button\"class=\"btn btn-primary btn-sm\">Usuń</button></div>");      


        name.append(options);
        fieldWrapper.append(name);
        fieldWrapper.append(url);
        fieldWrapper.append(removeButton);
        console.log(exer_ids.length);
        console.log(exer_ids);
        console.log(exer_desc_pls);

        $("#sortable").append(fieldWrapper);

        removeButton.click(function() {
            $(this).parent().remove();
        });
    });

});

</script>

Answer 1

創建選擇器后需要對其進行初始化。

我更新了你的小提琴（見第 78 行）

<script>
$(document).ready(function() {
    
 
    // Add row functionality
    $("#add").click(function() {
        var exer_ids = ["1", "2", "3"];
        var exer_desc_pls = ["Option 1", "Option 2", "Option 3"];
        var intId = $("#sortable div").length + 1;
        var fieldWrapper = $("<div class=\"form-row\" id=\"field" + intId + "\"/>");
        var name = $("<div class=\"form-group col-md-4\"/>");
        var options = "<select class=\"selectpicker form-control\" data-live-search=\"true\"><option selected disabled>Pick option...</option>";
               
        var i;
        for (i=0; i < exer_ids.length; i++) {
            options += "<option data-tokens=\"" + exer_ids[i] + "\">" + exer_desc_pls[i] + "</option>";
        };
        
        options += "</select>";
        
        var url = $("<div class=\"form-group col-md-4\"><input type=\"text\" name=\"url\" placeholder=\"Paste here the URL of the Image\"class=\"form-control\"></div>");
        var removeButton = $("<div class=\"form-group col-md-1\"><button type=\"button\"class=\"btn btn-primary btn-sm\">Usuń</button></div>");      


        name.append(options);
        fieldWrapper.append(name);
        fieldWrapper.append(url);
        fieldWrapper.append(removeButton);

        $("#sortable").append(fieldWrapper);

        // At this point, the select tag and options ARE in your DOM
        // just not visible because Bootstrap is hiding them with CSS (or something)
        // So you need to have the JQuery step in to handle the visibility
        $('select').selectpicker();

        removeButton.click(function() {
            $(this).parent().remove();
        });
    });

});

</script>