php

Question

548 votes

1 answers

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

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

<!--Basic DropDown-->

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

<!--AJAX Source-->
 $(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?? */
        }
    });
 });

Undefined asked

2021-12-1

Write your answer