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?

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>

Answer 2

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.

Answer 3

Have resolved by following steps:

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

Answer 4

why not implement this in a multilevel dropdown

 $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); });

 .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> </style> </head> <body> <div class="container"> <h2>Multi-Level Dropdowns</h2> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <script> </script> </body> </html>

Replace the menu items with the optgroup