jQuery -当选择填充列表发生变化时，取消下拉值

我遵循这个教程- http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/

本教程展示了一个填充的两个选择。我将其修改为显示三个选择。彼此依赖。

场景1:当我从"选择1"中选择一个选项时，"选择2"列表中填充了"选择3"。到目前为止，它可以正常工作。

场景2:当我在"选择1"中改变我的选择时，"选择2"列表被重置并根据"选择1"构建-这是假设它应该是。另一方面，如果不从"选择2"中选择任何内容，"选择3"仍然使用上述场景1的结果填充。我想让'选择3'失去它的值，每当我改变'选择1'。

这是我的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>