php - Jquery dynamic Nested or Multi-level dropdown, options change for same field when selected

Question

I need a feature for a dropdown that's a cross between chained fields and navigation for select field options. The idea is the dropdown loads options from Ajax/php, when the user selects an option, the options change with a link as the first option to return to the previous set of options.

I want to use Jquery, Bootstrap 4, Select2 .. although Select2 may not be needed but I like the search options tool

All is happening in one field, dynamically loading new options

Example:
Select Product
Windows       |--- Back to Products   |---  Back to Products
Doors---------|    Wood Doors         |     Back to Doors
Glass              Vinyl Doors--------|     Vinyl Entry
                                            Vinyl Sliders

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Action</button>
   <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="#">Action</a></li>
     <li><a class="dropdown-item" href="#">Another action</a></li>
     <li><a class="dropdown-item" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
     <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>

$(document).ready(function(){ var load_action = 'getNextList'; $.ajax({ url:"action.php", method:"POST", data:{load_action:load_action}, success:function(data){ /* Replace options? make sure link is included in source?? */ } }); }); question from:https://stackoverflow.com/questions/65944893/jquery-dynamic-nested-or-multi-level-dropdown-options-change-for-same-field-whe

Answer 1

I didn't know exactly what to call it, I searched "nested" and "Multi-level".
I did finally stumble on a few plugins, hope this helps someone else:

• jquery-dropdown
• Animated-Multi-level-jQuery-Dropdown-Plugin