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?

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?

• javascript
• jquery
• bootstrap-4
• bootstrap-selectpicker

• 2 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? – David Liang Commented Nov 6, 2020 at 22:07
• 1 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. – John M Commented Nov 6, 2020 at 22:12
• 1 check out this question its resolved there : stackoverflow./questions/37756959/… – Hammad Ahmed khan Commented Nov 9, 2020 at 4:36
• 4 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? – David Liang Commented Nov 9, 2020 at 18:18
• 1 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. – John M Commented Nov 9, 2020 at 18:47

3 Answers 3

Have resolved by following steps:

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

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./ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

    <!-- multi select dropdown -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <script src="https://cdnjs.cloudflare./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>

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.