Necesito mostrar un select
con una cantidad de datos de una tabla, y que al hacer clic poder cargar un valor (el id
). Vengo de VB6
donde era bastante fácil, aquí veo que tiene alguna vuelta más. Por cuestiones estéticas conseguí un código donde se reemplaza el select
por una lista desordenada ... y me gustó mucho más. El problema es que no lo entiendo del todo, y acorde a como lo pude hacer, logro que cargue los valores menos el primero. La idea es que yo pueda cargar un valor por defecto que se muestre primero, y luego en la lista se carguen todos los valores de ese campo. Me ayudan a entender y resolver ?
Copio el código :
<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>
Y copio tambien el .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);
});