php - una - select opcion por defecto
cuadro desplegable dinámico? (1)
Aquí hay un ejemplo que hará lo que quieras. Esencialmente, 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 tu servidor, así que si copias / pegas estos dos ejemplos en archivos ( tester.php y another_php_file.php ) entonces deberías 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é en varias líneas comentadas que, si no están commentadas (una a la vez), te mostrarán lo que está haciendo 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 - another_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 hace para que la segunda casilla desplegable rellene los campos que solo son relevantes para una opción seleccionada en el primer cuadro desplegable?"
A. Dentro del evento .change para el 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 evento .change() , incluye esa variable en los datos que está enviando al segundo archivo .PHP (en nuestro caso, "another_php_file.php")
C. Usas esa variable pasada en tu consulta mysql, limitando así tus resultados. Estos resultados luego son devueltos a la función AJAX y puede acceder a ellos en el success: parte de la función AJAX
D. En esa función de éxito, usted 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 alumno, que
.change()selector jQuery.change()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.php, a través de esta línea del código AJAX:data: ''theOption='' + sel_stud,El archivo que recibe
another_php_file.phprecibe la selección del usuario aquí:$selStudent = $_POST[''theOption''];Var $ selStudent (la selección del usuario publicada en via AJAX) se usa en la búsqueda de mysql:
$ query = "SELECT * FROM` category` WHERE `master` = 0 AND` name` = ''$ selStudent'' ";
(Al cambiar el ejemplo para adaptarse a su base de datos, se eliminó la referencia a $ selStudent. Pero esto (aquí, arriba) es cómo lo usaría).
Ahora construimos un nuevo bloque de código
<SELECT>, almacenando el HTML en una variable llamada$r. Cuando el HTML está totalmente desarrollado, devuelvo el código personalizado a la rutina AJAX simplemente repitiéndolo:echo $r;Los datos recibidos (el bloque de código
<SELECT>personalizado están disponibles para nosotros dentro delsuccess: function() {//code block}AJAXsuccess: function() {//code block}, y puedo inyectarlo en el DOM aquí:$(''#LaDIV'').html(whatigot);
Y listo, ahora verá un segundo control desplegable personalizado con valores específicos para la elección del primer control desplegable.
Funciona como un navegador que no es de Microsoft.
Tengo una tabla de la base de datos llamada categoría como se muestra:
Estoy intentando hacer 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>
La actualización.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.