How can I add options to a Bootstrap selectpicker 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?

Topi

The first level "Select Region" serves as vertical tabs to me. If all the countries are known before hands, why do you need to dynamically "add" another list once the user picks the region? – Monteux

I got around 50 different hierarchy level trees and would like to lazy load each tree to render faster rather than dumping all data once. – Topi

check out this question its resolved there : #37757459 – Megen

Questions for clarifying your requirements: 1) Your screenshot showed you can select multiple on group 1. If that's intended, how is the new list of group items going to work? Selecting option 1.2 will geneate a new list on the right, and selecting option 1.3 will cover the new list generated by 1.2? 2) Your screenshot showed group 1 items are valid selections as well and indeed selected. Does the items in group 1 serve as "select all" for the list on the right? – Monteux

Group 2 will be a list that appends all the Group 1 selection item's child elements. Selecting 1.2 and 1.3 will have 1.2 related child elements(2.1, 2.2) plus 1.3 related elements(2.3) under Group 2 list, adding a optgroup to distinguish will be helpful as well. Let me know if any information is further needed. – Topi

If that option in group 1 is unselected so the group 2 also should get removed ? Also , how we come to know which data need to add in group 2 currently it will be static ? – Fives

I found attached image from online, can we assume 1.1's child is 2.1, 1.2 = 2.2 and 1.3 = 2.3. And yes, when we unselect Group 1 items, Group 2 related contents be removed. Group 2 will be dynamically appended/toggled based on Group 1 selections. – Topi

So your question on this post is about how we can lay out Group 2 next to Group 1, just like your screenshot? Or you are having problem on dynamically building Group 2 list based on the Group 1 selections? I've solved later but not the formmer. And to be honest, I don't think formmer is doable even because bootstrap-select doesn't let you define your own dropdown template layout. It would be doable if there were 2 separate dropdowns, but it sounds like you want everything on one dropdown. – Monteux

@JohnM In your last comment say 1.2 child is 2.2 but in a previous comment you said 1.2 children were 2.1 and 2.2. So which one is correct? – Wager

I will correct my previous comment, for better understanding we can assign 1.1 with 2.1, 1.2 with 2.2 and 1.3 with 2.3. And based on checkbox selection in Group 1, the options in Group 2 gets added/removed dynamically. – Topi

Must it be a select element, would you accept a custom styled drop-down – Will

Answer 1

Have resolved by following steps:

$("#dropdownid").append('<option value="1" title="1">1</option>');
$("#dropdownid").selectpicker("refresh");
       

Steviestevy

Answer 2

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>

Athal

Answer 3

A reason why this might have not worked is because you can use double quotes in double quotes or double quotes for more than one line. Try using this instead:

$(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");

You also can't detect mouseover on an <option>. You can detect :hover though in case if you wanted to somehow link the two together that way. You could also create your own type of menu if this functionality doesn't work the way that you would like.

Alumna