Fill <select> in the same file through another <select> from BD data

Asked

Viewed 53 times

-1

I have a form where it contains a option select function, powered by the BD query. and On the screen appears only the 1st option select only the second will appear option select after selecting the first.

When selecting an option it shows another option select type with the result of this first selection, and is working perfectly.

I just have a problem that my resolution is in two files, the index.php, where is the function selection and jquery, and another file listaFuncoes.php where is the selection of the type result.

And I would like a solution for this resolution to stay in only one file, or be visible the 2 option select, has that possibility?

index.php:

<?php
require './conexao.php';
?>
<DOCTYPE>
    <html>
        <head>
            <title>Atualizando combos com jquery</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#funcao').change(function () {
                        $('#tipo').load('listaFuncoes.php?funcao=' + $('#funcao').val());
                    });
                });
            </script>
        </head>
        <body>
            <h1>Atualizando combos com jquery</h1>
            <label>Função:</label>
            <select name="funcao" id="funcao">
                <option value="">selecione</option>
                <?php
                $rs = mysqli_query($conexao, "SELECT * FROM funcao ORDER BY nome");
                for ($i = 0; $i < mysqli_num_rows($rs); $i++) {
                    $linha_funcao = mysqli_fetch_array($rs);
                    ?>
                    <option value="<?= $linha_funcao[0] ?>"><?php echo $linha_funcao[1] ?></option>
                    <?php
                }
                ?>
            </select>
            <br /><br />
            <div id="tipo">
            </div>
        </body>
    </html>

listaFuncoes.php:

<?php
require './conexao.php';

$id_estado = $_GET['funcao'];

$rs = mysqli_query($conexao, "SELECT DISTINCT tp.idfuncao, tpd.id ,tpd.descricao "
        . "FROM tipos_prova tp "
        . "INNER JOIN tipos_prova_descricao tpd ON tpd.idDescricao = tp.desctipoprova "
        . "WHERE tp.idfuncao = '$id_estado' "
        . "ORDER BY tpd.descricao");

echo "<label>tipo: </label><select name='tipo'>";
for ($i = 0; $i < mysqli_num_rows($rs); $i++) {
    $linha_funcao = mysqli_fetch_array($rs);
    ?>
    <option value="<?= $linha_funcao[0] ?>"><?php echo $linha_funcao[2] ?></option>
    <?php
}
echo "</select>";
php html jquery

  • Since you are using AJAX, it is much better that the requested page is in a separate file, as you are doing. Putting it all together in one file is complicating things unnecessarily.

  • I understand, let me explain, maybe I did not express well. when opening the page it shows only the 1º option, and when selecting the option is that appears the 2º option with the result. I would like you to keep showing the 2 at least.

  • Try adding .change() at the event: $('#funcao').change(function () {&#xA; $('#tipo').load('listaFuncoes.php?funcao=' + $('#funcao').val());&#xA; }).change();

  • Vlw, it worked perfectly, that’s what I wanted.

1 answer

0


I managed to add .change() at the event:

Before: 

$(document).ready(function () {
                    $('#funcao').change(function () {
                        $('#tipo').load('listaFuncoes.php?funcao=' + $('#funcao').val());
                    });
                });

Afterward: 

$(document).ready(function () {
                    $('#funcao').change(function () {
                        $('#tipo').load('listaFuncoes.php?funcao=' + $('#funcao').val());
                    }).change();
                });

Browser other questions tagged php html jquery

You are not signed in. Login or sign up in order to post.