how to have continuous dropdown list which inherit values from its predecessors in html

Question

i have a drop drop down list which is having some values. I need to have two more drop sown list but the second drop down list should filter its values from the first drop down list and the third drop down list should filter from the second. for example :

drop down list 1 contains foo1,foo2,foo3,...
drop down list 2 contains when foo1 is selected :bar1 bar2 bar2,..., 
                          when foo2 is selected :bar3,...,
                          when foo3 is selected :bar4, bar5,....
drop down list 3 contains when bar1 is selected : foobar1,...
                          when bar2 is selected : foobar2,...
                          .....

after the last dropdown list is selected i am performing the following :

$(document).ready(function() {
    $('#id').change(function () { // id is the id for the last dropdown list 
        $.ajax({
              url: 'appreturn',
              data: {ID:idname},
              method : 'GET',
              success: function(response)
             .....
   });
 })

; });

Can you suggest a way to implement the drop-down lists? NOTE : I am taking the values of the second and third drop-down list from the database. Thus, it can be any number of values

http://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another — adam-beck, Aug 30 '16 at 12:27
the values come from the database and there is atleast 10-100 values that would be shown in the dropdown list so it might not work — Sushin K.Kumar, Aug 30 '16 at 13:03
it can't be done since i am giving the restriction on the select query with the value from the drop down list — Sushin K.Kumar, Aug 30 '16 at 13:07

how to have continuous dropdown list which inherit values from its predecessors in html

0 Answers0