cuadro desplegable dinámico?
Obtuve una tabla de base de datos llamada categoría como se muestra:
Estoy intentando crear un cuadro desplegable dinámico y el script de índice se muestra como:
<?php
try {
$objDb = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `category`
WHERE `master` = 0";
$statement = $objDb->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
echo 'There was a problem';
}
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dependable dropdown menu</title>
<meta name="description" content="Dependable dropdown menu" />
<meta name="keywords" content="Dependable dropdown menu" />
<link href="/css/core.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/js/core.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<form action="" method="post">
<select name="gender" id="gender" class="update">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="category" id="category" class="update"
disabled="disabled">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update"
disabled="disabled">
<option value="">----</option>
</select>
</form>
</div>
</body>
</html>
El update.php se muestra como:
<?php
if (!empty($_GET['id']) && !empty($_GET['value'])) {
$id = $_GET['id'];
$value = $_GET['value'];
try {
$objDb = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$objDb->exec('SET CHARACTER SET utf8');
$sql = "SELECT *
FROM `category`
WHERE `master` = ?";
$statement = $objDb->prepare($sql);
$statement->execute(array($value));
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
if (!empty($list)) {
$out = array('<option value="">Select one</option>');
foreach($list as $row) {
$out[] = '<option
value="'.$row['id'].'">'.$row['name'].'</option>';
}
echo json_encode(array('error' => false, 'list' => implode('',
$out)));
} else {
echo json_encode(array('error' => true));
}
} catch(PDOException $e) {
echo json_encode(array('error' => true));
}
} else {
echo json_encode(array('error' => true));
}
El segundo cuadro desplegable no muestra los valores que dependen del primer cuadro desplegable como se muestra:
Puede alguien ayudarme por favor.
Aquí tienes un ejemplo que hará lo que quieras. Básicamente, puedes usar jQuery/AJAX para lograr esto.
Actualicé mi código de ejemplo para que coincida con los nombres de inicio de sesión/tabla/campo de su servidor, por lo que si copia/pega estos dos ejemplos en archivos (llámelos tester.phpy another_php_file.php), entonces debería tener un ejemplo completamente funcional para jugar.
Modifiqué mi ejemplo a continuación para crear un segundo cuadro desplegable, poblado con los valores encontrados. Si sigues la lógica línea por línea, verás que en realidad es bastante simple. Dejé varias líneas comentadas que, si las descomentas (una a la vez), te mostrarán lo que hace el guión en cada etapa.
ARCHIVO 1 - TESTER.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('Document is ready');
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready
</script>
</head>
<body>
<select name="students" id="stSelect">
<option value="">Please Select</option>
<option value="John">John Doe</option>
<option value="Mike">Mike Williams</option>
<option value="Chris">Chris Edwards</option>
</select>
<div id="LaDIV"></div>
</body>
</html>
ARCHIVO 2 - otro_php_file.php
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);
//Run DB query
$query = "SELECT * FROM `category` WHERE `master` = 0";
$result = mysql_query($query) or die('Fn another_php_file.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
$r = '
<h1>Found in Database:</h1>
<select>
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<option value="' .$row['id']. '">' . $row['name'] . '</option>';
}
} else {
$r = '<p>No student by that name on staff</p>';
}
//Add this extra button for fun
$r = $r . '</select><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the
echo $r;
Para responder a su pregunta en el comentario: "¿Cómo se puede hacer que el segundo cuadro desplegable complete campos que solo son relevantes para una opción seleccionada del primer cuadro desplegable?"
R. Dentro del .changeevento del primer menú desplegable, lee el valor del primer cuadro desplegable:
$('#dropdown_id').change(function() {
var dd1 = $('#dropdown_id').val();
}
B. En su código AJAX para el .change()evento anterior, incluye esa variable en los datos que envía al segundo archivo .PHP (en nuestro caso, "otro_archivo_php.php")
C. Utiliza esa variable pasada en su consulta MySQL, lo que limita sus resultados. Estos resultados luego se devuelven a la función AJAX y puede acceder a ellos en la success:parte de la función AJAX.
D. En esa función de éxito, inyecta código en el DOM con los valores SELECT revisados.
Eso es lo que estoy haciendo en el ejemplo publicado arriba:
El usuario elige el nombre de un estudiante, lo que activa el
.change()selector jQuery.Aquí está la línea donde toma la opción seleccionada por el usuario:
var sel_stud = $(this).val();Este valor se envía a
another_php_file.phptravés de esta línea del código AJAX:data: 'theOption=' + sel_stud,El archivo receptor
another_php_file.phprecibe la selección del usuario aquí:$selStudent = $_POST['theOption'];Var $selStudent (la selección del usuario publicada vía AJAX) se utiliza en la búsqueda de MySQL:
$consulta = " SELECCIONAR * DE `categoría` DONDE `maestro` = 0 Y `nombre` = '$selStudent' ";
(Al cambiar el ejemplo para adaptarlo a su base de datos, se eliminó la referencia a $selStudent. Pero así (aquí, arriba) es cómo lo usaría).
Ahora construimos un nuevo
<SELECT>bloque de código, almacenando el HTML en una variable llamada$r. Cuando el HTML está completamente compilado, devuelvo el código personalizado a la rutina AJAX simplemente repitiéndolo:echo $r;Los datos recibidos (el
<SELECT>bloque de código personalizado) están disponibles para nosotros dentro de AJAXsuccess: function() {//code block}y puedo inyectarlos en el DOM aquí:$('#LaDIV').html(whatigot);
Y listo, ahora verá un segundo control desplegable personalizado con valores específicos de la elección del primer control desplegable.
Funciona como un navegador que no es de Microsoft.
