Two html objects (list, input) should generate a third list

Your question is still a little confusing, but I'm working on the assumptions that:

1. Users will select a country
2. The available regions will be filtered to show only regions within the selected country
3. The regions can also be filtered by entering an optional keyword
4. The "zones" (?) will be filtered based on the above three selections, and displayed to the user

With that in mind, this combination should achieve what you need. I've stripped back the HTML to the bare essentials. I've also change the id of the fields to match (what I think) you're trying to achieve.

The script could be optimised further, but this example should set you on the right path, but let me know if you have additional questions.

I've created a JsFiddle demonstrating how this works.

HTML

<form method="post" action="">  
    Country: <select id="selectCountry" name="Alfa"></select>
    <br>
    Region:  <select id="selectRegion" name="Gamma"></select>
    <br>
    Wildcard: <input id="selectText" name="Beta">
</form>

Javascript

$(document).ready(function() {

    // Change to match your URL
    $.getJSON("/echo/json/", function(data) {
        // Override with fake data because I can't see what the PHP generates
        data = ['Australia', 'Japan', 'Uganda'];

        var str_options = "";
        for (var i=0; i < data.length; i++) {
            str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
        }
        $("#selectCountry").append(str_options);
    });

    // Filter regions based on the selected country
    filterRegions = function() {
        country = $("#selectCountry").val();
        wildcard = $("#selectText").val();

        console.log('Search for regions that match ' + country + ' and ' + wildcard);

        // Change to match your PHP url
        $.getJSON(" /echo/json/?country=" + country + "&wildcard=" + wildcard, function(data) {
            // Override with fake data
            data = ['California', 'Florida', 'Nevada'];

            var str_options = "";
            for (var i=0; i < data.length; i++) {
                str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
            }
            $("#selectRegion").html(str_options);
        });
    };

    // Filter results based on the selected region and any text search
    filterResults = function(){
        country = $("#selectCountry").val();
        wildcard = $("#selectText").val();
        region = $("#selectRegion").val();

        console.log('Search for zones that match ' + country + ' and ' + wildcard + ' and ' + region);

        // Change to match your PHP url
        $.getJSON("/echo/json/?country=" + country + "&region=" + region + "&wildcard=" + wildcard, function(data) {
            // Display results as you need
        });
    };

    // Attach event handlers to relevant DOM elements (instead of using inline change="Chg()" style functions)
    $("#selectCountry").on("change", filterRegions);
    $("#selectText").on("keyup", filterRegions);
    $("#selectRegion").on("change", filterResults);
});

Notes:

You will need to update the URLs being used for each getJson() request. The URLs will need to pass the values from the <input> and <select> tags as $_GET variables.

In my example, I've used fake data as an example, so remove this from your script when testing it. E.g.

data = ['California', 'Florida', 'Nevada'];

You do not need to specify $_SERVER['PHP_SELF'] because a <form> tag defaults to itself in the absence of any action attribute. E.g.

<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">

Can simply be:

<form method="post" action="">