时间戳

首页 > 解决方案 > Bootstrap-select - selectpicker类下拉列表未显示

javascript - Bootstrap-select - selectpicker类下拉列表未显示

问题描述

我正在处理的代码使用 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>

标签： javascripthtmljquerytwitter-bootstrap

解决方案

您需要在创建 selectpicker 后对其进行初始化。

我更新了你的小提琴（见第 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>

推荐阅读