Populate third HTML select based on second select

Question

I have to populate a third select based on second. I'm trying like code below. As it is I'm feeding first select with all countries in DB. Second select is feeded based on first select.

I need to populate the third select based on second select. The problem is: The first option on third select is the first option of the second, I don't know why it is apearing here.

show_location.php

<?php
function ShowCountries() {
    require 'PDOClasses/connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name FROM countries ORDER BY name ASC");
    $countryId = '<option value="">Selecione o país</option>';
    while($country = $query->fetch(PDO::FETCH_ASSOC)) {
        $countryId .= '<option value = "'.$country['id'].'">'.$country['name'].'</option>';
    }
    echo $countryId;
}

function ShowStates($id) {
    require '../connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name, country_id FROM states where country_id=$id ORDER BY name ASC");
    $stateId = '<option value="">Selecione o estado</option>';
    while($state = $query->fetch(PDO::FETCH_ASSOC)) {
        $stateId .= '<option value = "'.$state['id'].'">'.$state['name'].'</option>';
    }
    echo $stateId;
}

function ShowCities($id) {
    require '../connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name, state_id FROM cities where state_id=$id ORDER BY name ASC");
    $cityId = '<option value="">Selecione a cidade</option>';
    while($city = $query->fetch(PDO::FETCH_ASSOC)) {
        $cityId .= '<option value = "'.$city['id'].'">'.$city['name'].'</option>';
    }
    echo $cityId;
}

if(isset($_POST['id'])){
    ShowStates($_POST['id']);
    ShowCities($_POST['id']);
    die;
}

html

 <?PHP
        include 'menu.php';
        require 'PDOClasses/Accounts/account_logged_check.php';
        require 'PDOClasses/Business/show_categories.php';
        require 'PDOClasses/Location/show_location.php';
    ?>
        <script type="text/javascript">
                $(document).ready(function(){
                    $("select#stateId").attr("disabled","disabled");
                    $("select#countryId").change(function(){
                        $("select#stateId").attr("disabled","disabled");
                        $("select#stateId").html("<option>wait...</option>");
                        var id = $("select#countryId option:selected").attr('value');
                        $.post("PDOClasses/Location/show_location.php", {id:id}, function(data){
                            $("select#stateId").removeAttr("disabled");
                            $("select#stateId").html(data);
                        });
                    });
                    $("form#BusinessRegistration").submit(function(){
                        var cat = $("select#countryId option:selected").attr('value');
                        var stateId = $("select#stateId option:selected").attr('value');
                        if(cat>0 && stateId>0)
                        {
                            var result = $("select#stateId option:selected").html();
                            $("#result").html('your choice: '+result);
                        }
                        else
                        {
                            $("#result").html("you must choose two options!");
                        }
                        return false;
                    });
                });
            </script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("select#cityId").attr("disabled","disabled");
                    $("select#stateId").change(function(){
                        $("select#cityId").attr("disabled","disabled");
                        $("select#cityId").html("<option>wait...</option>");
                        var id = $("select#stateId option:selected").attr('value');
                        $.post("PDOClasses/Location/show_location.php", {id:id}, function(data){
                            $("select#cityId").removeAttr("disabled");
                            $("select#cityId").html(data);
                        });
                    });
                    $("form#BusinessRegistration").submit(function(){
                        var cat = $("select#stateId option:selected").attr('value');
                        var cityId = $("select#cityId option:selected").attr('value');
                        if(cat>0 && cityId>0)
                        {
                            var result = $("select#cityId option:selected").html();
                            $("#result").html('your choice: '+result);
                        }
                        else
                        {
                            $("#result").html("you must choose two options!");
                        }
                        return false;
                    });
                });
            </script>
            <div class="4u 12u(mobile)">
               <section class="box">
                  País<br>
                  <select name="countries" class="countries" id="countryId" tabindex="9" required>
                 <?php $sl->ShowCountries(); ?>
              </select>
           </section>
        </div>
        <div class="4u 12u(mobile)">
           <section class="box">
              Estado<br>
              <select name="states" class="states" id="stateId" tabindex="10" required>
              </select>
           </section>
        </div>
<div class="4u 12u(mobile)">
           <section class="box">
              Cidades<br>
              <select name="cities" class="cities" id="cityId" tabindex="11" required>
              </select>
           </section>
        </div>

Answer 1

Not sure why you are using a class for this so here's an example just using the 2 functions.

<?php
function ShowCountries() {
    require 'PDOClasses/connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name FROM countries ORDER BY name ASC");
    $countryId = '<option value="">Selecione o país</option>';
    while($country = $query->fetch(PDO::FETCH_ASSOC)) {
        $countryId .= '<option value = "'.$country['id'].'">'.$country['name'].'</option>';
    }
    echo $countryId;
}

function ShowStates($id) {
    require 'PDOClasses/connection.php';
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    $query = $db->query("SELECT id, name, country_id FROM states where country_id=$id ORDER BY name ASC");
    $stateId = '<option value="">Selecione o estado</option>';
    while($state = $query->fetch(PDO::FETCH_ASSOC)) {
        $stateId .= '<option value = "'.$state['id'].'">'.$state['name'].'</option>';
    }
    echo $stateId;
}
if(isset($_POST['id'])){
ShowStates($_POST['id']);
die;
}
?>

and in your html

<select name="countries" class="countries" id="countryId" tabindex="9" required>
         <?php ShowCountries(); ?>
      </select>