Create DropDown list from another DropDown with PHP

Question

Create DropDown list from another DropDown with PHP

Navigation

#1 by (1 votes)

0

I've been trying to do this for a while, but I failed miserably, I'm trying for a different method than I saw on the forum so I do not think I fall into duplicity.

I need to create a second dropdown from the parameters of the first one, it would look like the ones in which you enter your state, and next to it a list of cities will appear.

I created three files that would do this:

Html / JS In the function verificalist (), I should be able to call something that printed the list in the select "listII"

<html>
<head>
<?php require("cabecalho.php"); ?>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- <script src="ajax.js"></script> -->
</head>
<body>

    <form name="listas" method="GET" action="real_time.qm.php">

    <a>Origem: </a>
    <select id="listI" name="ori">
    <option value="0"></option>

    <?php
    include ("Conectcma.php");

        $pl = "SELECT DISTINCT origem FROM reg_qm_papel";
        $plgo = mysql_query($pl, $conexao);

    while($sc_l = mysql_fetch_array($plgo)){
       echo '<option>'.$sc_l['origem'].'</option>';
    } 
        ?>

    </select>&nbsp; &nbsp;&nbsp;
        <select id="listII" name="papel">
            <!-- Imprimir a lista aqui dps que chamasse inputasse valor na primeira lista -->
        </select>


            <button class="css_btn_class" type="submit">Cadastrar</button>
    </form>


    <script>

             $(document).ready(function(){

    $('#listI').on('change', function(){
        $('#listII').html('');
        var ori = $(this).val();
        $.ajax({
            url: 'puxa.php',
            data: {
                ori: ori
            },
            type: 'GET',
            dataType: 'json',
            success: function(data){
                $.each(data, function(){
                    $('#listII').append('<option>'+this.Papel+'</option>');
                })
            }
        })
    });

})
        }

    </script>

</body>

PHP

include ("Conectcma.php");

$ori = $_GET['ori'];

$pl1 = "SELECT Papel FROM reg_qm_papel WHERE origem = '$ori'";
$plgo1 = mysql_query($pl1, $conexao);

while($sc_l1 = mysql_fetch_assoc($plgo1)){
       $vetor[] = array_map('utf8_encode', $sc_l1);
    }  

echo json_encode($vetor);
?>

Edit1: = I've inserted the Ajax function into the index code, but it does not work yet.

php javascript html ajax

asked by anonymous 29.11.2017 / 15:20

1 answer

Change menu with CSS Click another click after 1 second

score 1 · Accepted Answer

Just try to make this change change this code by yourList () check:

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script><formname="listas" method="GET" action="real_time.qm.php">

    <a>Origem: </a>
    <select id="listI" name="ori">
        <option value="0">Selecione..</option>
        <?php
        include ("Conectcma.php");

        $pl = "SELECT DISTINCT origem FROM reg_qm_papel";
        $plgo = mysql_query($pl, $conexao);

        while($sc_l = mysql_fetch_array($plgo)){
            echo '<option>'.$sc_l['origem'].'</option>';
        }
        ?>
    </select>&nbsp; &nbsp;&nbsp;
    <select id="listII" name="papel">
        <!-- Imprimir a lista aqui dps que chamasse inputasse valor na primeira lista -->
    </select>
    <button class="css_btn_class" type="submit">Cadastrar</button>
</form>

<script>
    $(document).ready(function(){

        $('#listI').on('change', function(){
            $('#listII').html('');
            var ori = $(this).val();
            $.ajax({
                url: 'puxa.php',
                data: {
                    ori: ori
                },
                type: 'GET',
                dataType: 'json',
                success: function(data){
                    $.each(data, function(){
                        $('#listII').append('<option>'+this.Papel+'</option>');
                    })
                }
            })
        });

    })
</script>