如何在woocommerce结帐中创建动态选择城市/大学

Question

我想创建一个字段，供人们选择城市并从数据库中显示该城市的大学。

我已经找到了这篇文章，它给了我一些帮助，但是我无法从数据库中获取信息，我不擅长javascript。 Dynamic synched custom checkout select fields in WooCommerce

add_action( 'woocommerce_after_order_notes', 'novo_campo_woocommerce' ); 

function novo_campo_woocommerce( $checkout ) { 
    echo '<select id="estados" class="form-control" name="estados">
            <option selected disabled>Escolha seu estado</option>';
    $conexao = new PDO('mysql:host=localhost;dbname=db_certificado', 'root', '');
    $sql = ('SELECT * FROM tb_estado ORDER BY nome ASC');
    $sql = $conexao->prepare($sql);
    $sql->execute();
    $lista = $sql->fetchAll();
    for ($i=0; $i < count($lista); $i++) { 
        $uf = $lista[$i]['uf'];
        $nome = $lista[$i]['nome'];
        echo "<option value='$uf'>$nome</option>";
    }
    echo '</select>';
    echo '<select class="form-control" name="cidades" id="cidades" required>
              <option value="" selected disabled>Selecione o estado primeiro</option>
          </select>';
    echo '<select class="form-control" name="universidades" id="universidades" required>
              <option value="" selected disabled>Selecione a cidade primeiro</option>
          </select>';
?>
<script>
    $(function(){
            $("#estados").change(function(){
              var uf = $(this).val();
              $.ajax({
                type: "POST",
                url: "func/exibe_cidade.php?uf="+uf,
                dataType:"text",
                success: function(res){
                  $("#cidades").children(".cidades").remove();
                  $("#universidades").children(".universidades").remove();
                  $("#palestras").children(".palestras").remove();
                  $("#cidades").append(res);
                  console.log(res);
                }
              });
            });
            $("#cidades").change(function(){
              var id = $(this).val();
              $.ajax({
                type: "POST",
                url: "func/exibe_universidade.php?id="+id,
                dataType:"text",
                success: function(res){
                  $("#universidades").children(".universidades").remove();
                  $("#palestras").children(".palestras").remove();
                  $("#universidades").append(res);
                }
              });
            });
          });
</script>
<?php
}

exibe_cidade.php

    <?php

require_once "conn.php";

$uf = $_GET['uf'];
$sql = 'SELECT * FROM tb_cidade WHERE uf = ? ORDER BY nome';
$stm = $conexao->prepare($sql);
$stm->bindValue(1, $uf);
$stm->execute();
$lista = $stm->fetchAll();
for($i=0;$i<count($lista);$i++){ 
    $id = $lista[$i]['id'];
    $nome = $lista[$i]['nome'];

    echo '<option value="'.$id.'" class="cidades">'.$nome.'</option>';
    }
?>