Fill a select from mysql with php

Question

Fill a select from mysql with php

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need to show a select with a quantity of data from a table, and that on clicking I can load a value (the id ). I come from VB6 where it was quite easy, here I see that it has some more lap. For aesthetic reasons I got a code where the select is replaced by a messy list ... and I liked it a lot more. The problem is that I do not understand it at all, and according to how I could do it, I managed to load the values except for the first one. The idea is that I can load a default value that is shown first, and then in the list all the values of that field are loaded. They help me understand and solve?

I copy the code:

<html>
<head>
    <title>prueba combo</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link href="css/estilo.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="js/jquery-3.1.0.js" type="text/javascript"></script>
    <script src="js/func.js" type="text/javascript"></script>   
</head>
<body>
<?php include 'conexion.php'; ?>
<div id="contiene_combo">
            <div class="cajaselect">
                <?php
                    $consulta="select sector FROM 'maestros'";
                    $result=mysqli_query($con,$consulta);
                    $zzzz = $result->fetch_array(MYSQLI_ASSOC);        
                ?>
            <span class="seleccionado"><?php echo $zzzz['sector'][0]; ?></span>
            <ul class="listaselect">
                <?php
                    while ($filas=mysqli_fetch_array($result))
                    {
                     $dato=$filas['sector'];
                ?>
                <li>
                    <a href="#"><?php echo $dato ?></a>
                </li>
            <?php  };
            ?>
        </ul>
<span class="trianguloinf"></span>
            </div>
        </div>
    </body>
</html>

And I also copy the .js:

$(document).ready(function() {
    function clickcaja(e) {
        var lista = $(this).find("ul"),
            triangulo = $(this).find("span:last-child");
        e.preventDefault();
        //lista.is(":hidden") ? $(this).find("ul").show() : $(this).find("ul").hide();
      $(this).find("ul").toggle();
        if(lista.is(":hidden")) {
            triangulo.removeClass("triangulosup").addClass("trianguloinf");
        }
        else {
            triangulo.removeClass("trianguloinf").addClass("triangulosup");
        }
    }
    function clickli(e) {
        var texto = $(this).text(),
            seleccionado = $(this).parent().prev(),
            lista = $(this).closest("ul"),
            triangulo = $(this).parent().next();
        e.preventDefault();
        e.stopPropagation();    
        seleccionado.text(texto);
        lista.hide();
        triangulo.removeClass("triangulosup").addClass("trianguloinf");
    }

    $(".cajaselect").click(clickcaja);

    $(".cajaselect").on("click", "li", clickli);
    });

javascript jquery php

asked by look68 16.01.2017 в 14:44

source

2 answers

Validate dates with JavaScript Form integrated in groupBox

score 1 · Answer 1

If you want to load the id from the list you must add the field to the query, then you can add a hidden one to each

register and add it to each one that you click on it, it would be something like that

<div id="contiene_combo">
        <div class="cajaselect">
            <?php
                $consulta="select * FROM 'maestros'";
                $result=mysqli_query($con,$consulta);
                $zzzz = $result->fetch_array(MYSQLI_ASSOC);        
            ?>
        <span class="seleccionado"><?php echo $zzzz['sector'][0]; ?></span>
        <ul name ='sublista'>
        </ul>
        <ul class="listaselect">
            <?php
                while ($filas=mysqli_fetch_array($result))
                {
                 $dato=$filas['sector'];
            ?>
            <li>
                <a href="#"><?php echo $dato ?></a>
                <ul name ='sublista-2'>
                    <li> <?= $dato['id'] ?></li>
                </ul>
            </li>
        <?php  };
        ?>
    </ul>

It would be necessary to hide the lists and also index them to the sublist of the span in the js

$(document).ready(function() {
$('ul[name=sublista-2]').hide();
function clickcaja(e) {
    var lista = $(this).find("ul"),
        triangulo = $(this).find("span:last-child");
    e.preventDefault();
    //lista.is(":hidden") ? $(this).find("ul").show() : $(this).find("ul").hide();
  $(this).find("ul").toggle();
    if(lista.is(":hidden")) {
        triangulo.removeClass("triangulosup").addClass("trianguloinf");
    }
    else {
        triangulo.removeClass("trianguloinf").addClass("triangulosup");
    }
}
function clickli(e) {
    console.log($(this).children('ul[name=sublista-2]'));
    var texto = $(this).children()[0].text,
        seleccionado = $('.seleccionado'),
        lista = $(this).closest("ul.listaselect"),
        triangulo = $(this).parent().next();
    $('ul[name=sublista]').append($(this).children('ul[name=sublista-2]').children());
    $('ul[name=sublista]').show();
    e.preventDefault();
    e.stopPropagation();    
    seleccionado.text(texto);
    lista.hide();
    triangulo.removeClass("triangulosup").addClass("trianguloinf");
}

$(".cajaselect").click(clickcaja);

$(".cajaselect").on("click", "li", clickli);
});

I hope it is what you are looking for, and if you have any questions or if it is not what you were looking for, you could add more details

score 0 · Answer 2

I do not know if I understood you ... if you want to load the registration id, you also have to include it in the query.

I would do so in a select

<?php
$consulta="select id, sector FROM 'maestros'";
$result=mysqli_query($con,$consulta);
$bandera = true;
?>

<!-- en lugar del div.cajaselect -->
<select id="sector_maestros">

<?php
while ($filas=mysqli_fetch_array($result)) {
     $id_dato = $filas['id']; // guarda el id del registro
     $dato = $filas['sector']; // guarda el dato del registro
     ?>
     <!-- en el value se inyecta el id, con la bandera se verifica que sea la primera iteracion del bucle -->
     <option value="<?php echo $id_dato; ?>" <?php echo ($bandera == true) ? "selected" : ""; ?> >
          <?php echo $dato; /* imprime el sector en el option */ ?>
     </option>
     <?php
     $bandera = false; // cambia el valor de la bandera para no seleccionar nada en la siguiente iteración
}
?>
</select>

<span class="trianguloinf"></span>