使用模态中的先前组合框选择的值从数据库填充组合框

Question

我有一个包含3个组合框的模态，当我从第一个组合框选择一个元素时，我从数据库中获取数据以填充另一个组合框，然后使用该组合框从数据库中填充第三个组合框。为了做到这一点，我正在使用ajax。

问题是，如果我尝试在普通的HTML页面中执行此操作，则效果很好，但是我无法使其在模式中运行。我想念什么？怎么了？

我希望有人能帮助我，在此先感谢。

这是我的模式代码：

        <?php
        if (isset($con))
        {
            require_once ("Conexion/conexion.php");
    ?>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel"><i class='glyphicon glyphicon-edit'></i> Agregar nuevo usuario</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" method="post" id="guardar_usuario" name="guardar_usuario">
            <div id="resultados_ajax"></div>              

              <div class="form-group">
                <label for="user_Zona" class="col-sm-3 control-label">Zona</label>
                <div class="col-sm-8">
                  <li id="li_3" style="list-style-type: none;" >

        <span>
//first combobox
                    <select id="provincia">
                <option value="0">Provincia</option>
                <option value="1">San José</option>
                <option value="2">Alajuela</option>
                <option value="3">Cartago</option>
                <option value="4">Heredia</option>
                <option value="5">Guanacaste</option>
                <option value="6">Puntarenas</option>
                <option value="7">Limón</option>
              </select>

        </span>
        <span>
//Secon combobox populated from database

                    <select id="Canton">
                    <option value="0">Cantón</option>
                    </select>
        </span> 
        <span>


//third combobox populated from database too
                    <select id="Distrito">
                    <option value="0">Distrito</option>
                    </select>
        </span>  
        </li>
                </div>
              </div>


              </div>






          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-primary" id="guardar_datos">Guardar datos</button>
          </div>
          </form>
        </div>
      </div>
    </div>

这是我尝试从数据库中获取数据的方法：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){
    $('#provincia').on('change',function(){
        var IdProvincia = $(this).val();
        if(IdProvincia){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'IDProvincia='+IdProvincia,
                success:function(html){
                    $('#Canton').html(html);
                    $('#Distrito').html('<option value="">Distrito</option>'); 
                }
            }); 
        }else{
            $('#Canton').html('<option value="">Cantón</option>');
            $('#Distrito').html('<option value="">Distrito</option>'); 
        }
    });

    $('#Canton').on('change',function(){
        var IdCanton = document.getElementById("Canton").value;
        var IdProvinciaC = document.getElementById("provincia").value;
        if(IdCanton){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:{IdCanton:IdCanton,
                IdProvinciaC: IdProvinciaC
                },
                success:function(html){
                    $('#Distrito').html(html);
                }
            });     
        }else{
            $('#Distrito').html('<option value="">Distrito</option>'); 
        }
    });
});
</script>


    <?php
        }
    ?>

这是我使用POST值创建查询的地方：

    <?php
//Include the database configuration file
include 'dbConfig.php';

if(!empty($_POST["IDProvincia"])){
    //Fetch all state data
    $query = $db->query("SELECT * FROM Canton WHERE IDProvincia = ".$_POST['IDProvincia']." ORDER BY IDCanton ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //State option list
    if($rowCount > 0){
        echo '<option value="">Cantón</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['IDCanton'].'">'.$row['Canton'].'</option>';
        }
    }else{
        echo '<option value="">Cantón no disponible</option>';
    }
}elseif(!empty($_POST['IdCanton'])&&!empty($_POST['IdProvinciaC'])){
    //Fetch all city data
    $query = $db->query("SELECT * FROM Distrito WHERE FK_Canton = '".$_POST['IdCanton']."' AND FK_Provincia= ".$_POST['IdProvinciaC']." ORDER BY IDDistrito ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;

    //City option list
    if($rowCount > 0){
        echo '<option value="">Distrito</option>';
        while($row = $query->fetch_assoc()){ 
            echo '<option value="'.$row['IDDistrito'].'">'.$row['Distrito'].'</option>';
        }
    }else{
        echo '<option value="">Distrito no disponible</option>';
    }
}
?>