如何使用javascript附加和编辑选择标签？

Question

我有这种桌子

menu_id    menu_name     parent_id
1          Rapat 2018    0
2          Rapat RT      1
3          Rapat 2019    0
4          Rapat RW      1
5          Rapat RT 02   2    
6          17 Agustus    5

我想根据父母选择表格。

如果第一个选择框选择“ Rapat 2018”，则第二个选择框出现，并带有Rapat 2018的子项选项。

但是问题是，当我在第一个选择框中更改选择其他选项时，第二个选择框中的选项没有更改，但是出现了新的选择框。

当第一个选择框更改时，如何更改第二个选择框？ 如果我从第二个选择框中选择选项，则会出现第三个选择框。

这就是我所做的

menu_drop_down.php

<?php
include 'conf.php';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $sql = "SELECT MainMenu.menu_id, MainMenu.menu_name AS Menu, MainMenu.parent_id AS ParentId, COUNT(ChildMenu.menu_id) as Child, MainMenu.link
    FROM menu AS MainMenu
    LEFT JOIN menu AS ChildMenu ON ChildMenu.parent_id = MainMenu.menu_id
    WHERE MainMenu.parent_id=0
    GROUP BY MainMenu.menu_id, MainMenu.menu_name
    ORDER BY MainMenu.menu_name DESC ";

    $q = $pdo->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Could not connect to the database $dbname :" . $e->getMessage());
}


?>

<!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" id="1">
                    <option value="">Select</option>
                    <?php
                    while ($r = $q->fetch()){
                        echo '<option value="'.$r['menu_id'].'">'.$r['Menu'].'</option>';
                    }
                    // foreach($data as $d){
                    //  echo '<option value="'.$d['id'].'">'.$d['post_title'].'</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();
            var Sid = $(this).attr('id');
            var tes = ++Sid;
            console.log(tes);
            $.ajax({
                url:'getmenu.php',
                type:'post',
                data:{'id':id, 'tes' : tes},
                success:function(data){
                    //alert(data);
                    $('#dropdown_container').append(data);
                }
            })
        });
    });
</script>
</body>
</html>

getmenu.php

<?php
include 'conf.php';


try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);


} catch (PDOException $e) {
    die("Could not connect to the database $dbname :" . $e->getMessage());
}
if(isset($_POST['id'])){
    $id= $_POST['id'];
    $tes= $_POST['tes'];
    $sql = "SELECT MainMenu.menu_id, MainMenu.menu_name AS Menu, MainMenu.parent_id AS ParentId, COUNT(ChildMenu.menu_id) as Child, MainMenu.link
                FROM menu AS MainMenu
                LEFT JOIN menu AS ChildMenu ON ChildMenu.parent_id = MainMenu.menu_id
                WHERE MainMenu.parent_id=".$id."
                GROUP BY MainMenu.menu_id, MainMenu.menu_name
                ORDER BY MainMenu.menu_name DESC";

    $q = $pdo->query($sql);
    $q->setFetchMode(PDO::FETCH_ASSOC);

    if(!empty($q)){
        echo '<div class="row">
        <div class="col-md-4">
        <select name="category" class="form-control category" id="'.$tes.'">
        <option value="">Select</option>';
        while ($r = $q->fetch()){
            echo '<option value="'.$r['menu_id'].'">'.$r['Menu'].'</option>';
        }
        echo '</select>
        </div>
        </div>';
    }
}
?>

任何帮助，将不胜感激 ！