Php jQuery-在选择填充列表中发生更改时，使下拉列表值为空

我正在学习本教程-

本教程显示了填充的两个选择。我修改它以显示三个选择。相互依赖

场景1：由于我从“选择1”中选择了一个选择，“选择2”列表中填充了“选择3”。到目前为止，它工作正常

场景2：当我在“选择1”中更改我的选择时，“选择2”列表被重置，并根据“选择1”构建-这是假设的。另一方面，在没有从“选择2”中选择任何内容的情况下，“选择3”仍然使用上述场景1的结果填充。每当我更改“选择1”时，我希望“选择3”失去其值

这是我的jquery代码

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>

    function getCity(val) {
        $.ajax({
            type: "POST",
            url: "get_city.php",
            data:'secondary_cat='+val,
            success: function(data){
                $("#tertiary_cat").html(data);
            }
        });
    }


    function getState(val) {
        $.ajax({
            type: "POST",
            url: "get_state.php",
            data:'primary_cat='+val,
            success: function(data){
                $("#secondary_cat").html(data);
            }
        });
    }

    function selectCountry(val) {
        $("#search-box").val(val);
        $("#suggesstion-box").hide();
    }
</script>

功能getCity（val）{
$.ajax({
类型：“POST”，
url:“get_city.php”，
数据：'secondary_cat='+val，
成功：功能（数据）{
$（“#第三类”）.html（数据）；
}
});
}
函数getState（val）{
$.ajax({
类型：“POST”，
url:“get_state.php”，
数据：'primary_cat='+val，
成功：功能（数据）{
$（“#第二类”）.html（数据）；
}
});
}
功能选择国家/地区（val）{
$（“#搜索框”）.val（val）；
$（“#建议框”）.hide（）；
}

当您更改选择1时，使用类似于此的代码填充选择2和空选择3

当您更改选择1时，使用类似于此的代码填充选择2和空选择3