'Bootstrap select custom dynamic options

I am using bootstrap select and I encounter a problem when I want to add dynamic options using Javascript. The list is always empty. When I switch back to using HTML select the following Javascript code works perfectly.

HTML:

<select class="selectpicker" data-style="btn-lg btn-list-author" 
id="author-list" data-live-search="true" title="Select Author"></select>

Javascript:

readDataFromGit('https://api.github.com/repos/' + repolink + '/contributors', function(text){
         data = JSON.parse(text);
         $.each(data, function(i, v) {
         alert(v.login);
         var ul = document.getElementById("author-list");
         var li = document.createElement("option");
         var linkText = document.createTextNode(v.login);
         li.appendChild(linkText);
         ul.appendChild(li);
     })
});
javascriptjqueryhtmltwitter-bootstrapcucumbercucumberjs


Solution 1:[1]

Here is a dynamic drop-down menu with grouped options from a data array:

// Example data Array list
namespace_list = [
    ['test1-c1', 'test2-c1', 'test3-c1', 'test4-c1', 'test5-c1', 'test6-c1'],
    ['test1-c2', 'test2-c2', 'test3-c2', 'test4-c2', 'test5-c2', 'test6-c2']
]


$('#pod_dropdown').selectpicker();

// Selecting selectpicker dropdown
select = document.getElementById('pod_dropdown');

for (let namespace of namespace_list) {

    // Generating group name
    namespace_name = namespace[0].slice(6, 8)+'-title'

    // Creating the optiongroup

    var optgroup = document.createElement('optgroup');
    optgroup.id = namespace_name;
    optgroup.label = namespace_name
    // Appending optiongroup to the dropdown
    select.appendChild(optgroup);

    // Selecting the optiongroup 
    optiongroup = document.getElementById(namespace_name);

    for (let pod of namespace) {

        // Creating the options of the optiongroup 
        var opt = document.createElement('option');
        opt.value = pod;
        opt.innerHTML = pod;
        // Appending the option to the optiongroup
        optiongroup.appendChild(opt);

    }

}
// Refresh the dropdwon menu
$('#pod_dropdown').selectpicker("refresh");



// Getting the value after selecting it in the UI and unselect the dropdown

function filterpod() {
    let pod = $('#pod_dropdown').val().toString();
    console.log(pod)

}
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- multi select dropdown -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

    <!-- Creatting the dropdown -->
    <select id="pod_dropdown" class="selectpicker" data-style="btn btn-primary btn-sm" multiple data-live-search="true" data-width="auto"></select>
    
    <!-- Calling the function filterpod when hide dropdown after select option -->
    <script type="text/javascript">
        $('#pod_dropdown').on('hide.bs.select', function(e) {filterpod();});
    </script>

Solution 2:[2]

Run it as npx instead of npm, should wort you out

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Spuck

Related Questions