php valor - cuadro desplegable dinámico?





por default (2)


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:

  1. El usuario elige el nombre de un alumno, que .change() selector jQuery .change()

  2. Aquí está la línea donde toma la opción seleccionada por el usuario:

    var sel_stud = $(this).val();

  3. 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,

  4. El archivo que recibe another_php_file.php recibe la selección del usuario aquí:

    $selStudent = $_POST['theOption'];

  5. 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).

  6. 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;

  7. Los datos recibidos (el bloque de código <SELECT> personalizado están disponibles para nosotros dentro del success: function() {//code block} AJAX success: 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.




Hay una buena explicación en la documentación de on() .

En breve:

Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada a .on() .

Así, en el siguiente ejemplo, #dataTable tbody tr debe existir antes de que se genere el código.

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

Si se está inyectando nuevo HTML en la página, es preferible usar eventos delegados para adjuntar un controlador de eventos, como se describe a continuación.

Los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior. Por ejemplo, si la tabla existe, pero las filas se agregan dinámicamente utilizando el código, lo siguiente lo manejará:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

Además de su capacidad para manejar eventos en elementos descendientes que aún no se han creado, otra ventaja de los eventos delegados es su potencial para una sobrecarga mucho menor cuando se deben monitorear muchos elementos. En una tabla de datos con 1,000 filas en su tbody , el primer ejemplo de código adjunta un controlador a 1,000 elementos.

Un enfoque de eventos delegados (el segundo ejemplo de código) adjunta un controlador de eventos a un solo elemento, el tbody , y el evento solo necesita aumentar un nivel (desde el tr click hasta el tbody ).

Nota: Los eventos delegados no funcionan para SVG .





php jquery html