PHP Ajax Category and unlimited subcategory. Not work when change global (first) category

Question

263 votes

0 answers

PHP Ajax Category and unlimited subcategory. Not work when change global (first) category

Get the solution ↓↓↓

I have code:

conf.php

<?php
$conn = mysqli_connect('localhost','root','','ogl') or die(mysqli_error($conn));?>

getcategory.php

<?php
include 'conf.php';
if(isset($_POST['id'])){
$id= $_POST['id'];
$query = 'SELECT * FROM categories 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>';
}
}
?>

category-dropdown.php

<?php
include 'conf.php';

$query = 'SELECT * FROM categories 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>

So, all works but when i change first element see errors, and script generate new select box. How to add clearing other selection when user change first category? Thanks for help.

Mysql tables:

INSERT INTOcategories (id,parent_id,category) VALUES (1, 0, 'PHP'), (2, 0, 'HTML'), (3, 1, 'Laravel'), (4, 1, 'Wordpress'), (5, 1, 'Codeigniter'), (6, 3, 'asdads');