Dependable Drop Down Menus

Question

After creating three dependable drop down menus using jquery,ajax and php. After my dropdown menus have already been populated, for example when i select a value in the first drop down menu, the second drop down menu is created based on the first selected value and so on with the third drop down menu when i select a value in the second drop down menu. Now how to capture the selected values again altogether to perform further queries on the database.

Answer 1

Set the same class name for all select box and every change in select box run the function and run each function which all selected to get all the selected values like this

 dropdown1 =''; dropdown2 =''; dropdown3 =''; $('.qm_SELECT_sel').change(function(){ // $all_drop_down_values =[]; $('.qm_SELECT_sel option:selected').each(function(){ if($(this).val()!='' && $(this).attr('name')=='dropdown1') { dropdown1 =$(this).val(); } if($(this).val()!='' && $(this).attr('name')=='dropdown2') { dropdown2 =$(this).val(); } if($(this).val()!='' && $(this).attr('name')=='dropdown3') { dropdown3 =$(this).val(); } }); if(dropdown1!='' && dropdown3 !='' && dropdown3 !='') { $.ajax({ url: 'your_destination_page.php', type:'POST', data:{dropdown1:dropdown1,dropdown2:dropdown2,dropdown3:dropdown3}, success:function(data) { alert("hi"); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="dropdown1" class="qm_SELECT_sel"> <option value="" >select 1 </option> <option value="1" >1 </option> <option value="2" >2</option> </select> <select name="dropdown2" class="qm_SELECT_sel" > <option value="" >select 2 </option> <option value="1" >1 </option> <option value="2" >2</option> </select> <select name="dropdown3" class="qm_SELECT_sel" > <option value="" >select 2 </option> <option value="1" >1 </option> <option value="2" >2</option> </select>