bootstrap selectpicker adding options dynamically

Question

I'm trying to create a dropdown that when clicked on the first list item opens a new list of items related to the selected next to the list as shown below:

I tried to use Bootstrap selectpicker for this and on click trying to add another list as:

<select class="selectpicker" data-live-search="true">
            <optgroup label="Select Group 1">
                <option value="1">Option 1.1</option>
                <option value="2">Option 1.2</option>
                <option value="3">Option 1.3</option>
            </optgroup>
            
        </select>

and in jquery on click trying to append and refresh the selectpicker.

       $(event.target)
           .append("<optgroup label="Select Group 2">
                <option value="4">Option 2.1</option>
                <option value="5">Option 2.2</option>
                <option value="6">Option 2.3</option>
            </optgroup>");
       $(dropdowmElem).selectpicker("refresh");

But I'm not sure how to achieve similar kind of layout. I'm not looking for similar CSS styles but to render another list next to existing list, any help/ sources to solve this?

Answer 1

I’ve created an example of creating a dynamic drop-down menu with grouped options by taking the data from an array. I hope it helps

// 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>