I am following this tutorial - http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/
The tutorial shows a populated two selects. I modified it to show three selects. Each depends on the other.
Scenario 1: As I chose a selection from 'Selection 1', the 'Selection 2' list is populated with 'Selection 3'. Till now it works correctly.
Scenario 2: When I change my selection in 'Selection 1', the 'Selection 2' list is reset and is built according 'Selection 1' - this is suppose as it should be. On the other hand without choosing anything from 'Selection 2', 'Selection 3' remains populated with the result from scenario 1 above. I want 'Selection 3' to lose its value whenever I change 'Selection 1'.
This is my jquery code.
<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>
