проблемы такие: Допустим, я "спустился" на 4-ю вложенность и у меня уже построено 4 "селекта". А если поменять самый первый select, то новые значения подгружаются только во втором. А в третьем и четвертом выборках старые данные остаются. PHP: <?php include 'conf.php'; $query = 'SELECT * FROM category WHERE parent_id=0'; $result = mysqli_query($conn,$query); $data = $result->fetch_all(MYSQLI_ASSOC); ?> <!DOCTYPE html> <html lang="en"> <head> <title>MultiDropdown</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <select name="category" class="form-control category"> <option value="">Select</option> <?php foreach($data as $d){ echo '<option value="'.$d['id'].'">'.$d['category'].'</option>'; } ?> </select> </div> </div> <div id="dropdown_container"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $(document).on('change','.category',function(){ var id = $(this).val(); $.ajax({ url:'getcategory.php', type:'post', data:{'id':id}, success:function(data){ //alert(data); $('#dropdown_container').append(data); } }) }); }); </script> </body> </html> getcategory.php PHP: <?php include 'conf.php'; if(isset($_POST['id'])){ $id= $_POST['id']; $query = 'SELECT * FROM category WHERE parent_id = '.$id; $result = mysqli_query($conn,$query); $data = $result->fetch_all(MYSQLI_ASSOC); if(!empty($data)){ echo '<div class="row"> <div class="col-md-4"> <select name="category" class="form-control category"> <option value="">Select</option>'; foreach($data as $d){ echo '<option value="'.$d['id'].'">'.$d['category'].'</option>'; } echo '</select> </div> </div>'; } } ?>