Completar otro menú desplegable de selección basado en la selección desplegable

Estoy construyendo un sitio web para aprender a codificar y estoy intentando construir una herramienta donde un usuario haga clic en un menú desplegable que contenga algunos nombres de categorías extraídos de cat y luego aparecerá otra selección con nombres de subcategorías extraídos de la base de datos subcat. Esto es casi exactamente como Yelp (vaya a las categorías) like Yelp's (go down to the categories).Completar otro menú desplegable de selección basado en la selección desplegable

También hice un diagrama:

enter image description here

ya tengo una categoría desplegable que está tirando de gato base de datos:

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?>

Y tengo una subcat que está tirando de Base de datos de subcanales:

<p><b>Subcat1:</b><br /> 
<?php 
    $query="SELECT id,subcat FROM subcat"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

¿Cómo hago un menú desplegable de subcategoría según lo que el usuario hace clic en la categoría y que aparezca automáticamente? ¡Muchas gracias por toda la ayuda!

Fuente

2012-07-24 infinity

Me limitaría a poner las variables en javascript con php y luego utilizar las funciones de JavaScript .. no se necesita jquery o AJAX.

Sin embargo es necesario tener una clave externa para las subcategorías no importa lo que .. es decir, - Por cada registro de la tabla subcat que necesita para darle un catid modo para referenciar ...

<?php 
    $db = new mysqli('localhost','user','password','dbname');//set your database handler 
    $query = "SELECT id,cat FROM cat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $categories[] = array("id" => $row['id'], "val" => $row['cat']); 
    } 

    $query = "SELECT id, catid, subcat FROM subcat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']); 
    } 

    $jsonCats = json_encode($categories); 
    $jsonSubCats = json_encode($subcats); 


?> 

<!docytpe html> 
<html> 

    <head> 
    <script type='text/javascript'> 
     <?php 
     echo "var categories = $jsonCats; \n"; 
     echo "var subcats = $jsonSubCats; \n"; 
     ?> 
     function loadCategories(){ 
     var select = document.getElementById("categoriesSelect"); 
     select.onchange = updateSubCats; 
     for(var i = 0; i < categories.length; i++){ 
      select.options[i] = new Option(categories[i].val,categories[i].id);   
     } 
     } 
     function updateSubCats(){ 
     var catSelect = this; 
     var catid = this.value; 
     var subcatSelect = document.getElementById("subcatsSelect"); 
     subcatSelect.options.length = 0; //delete all options if any present 
     for(var i = 0; i < subcats[catid].length; i++){ 
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id); 
     } 
     } 
    </script> 

    </head> 

    <body onload='loadCategories()'> 
    <select id='categoriesSelect'> 
    </select> 

    <select id='subcatsSelect'> 
    </select> 
    </body> 
</html>

Fuente

2012-07-24 18:03:58 dano

notará i seleccione catid de subcat también para que pueda relacionar subcats con cat ... esto es necesario – dano

¡gracias por eso! Funcionó muy bien!¿Cómo podría hacerlo para tres conjuntos de menús desplegables así? – infinity

Sí, no hay problema .. el tercer menú desplegable basado en el segundo menú desplegable, supongo? – dano

Si está utilizando AJAX, querrá que el segundo bit de código sea un archivo php separado al que llamará a través de AJAX. en la devolución de llamada desde la llamada AJAX, simplemente haz (pseudo-código): someContainingDivOrSomething.innerHtml = responseBody;.

Tenga en cuenta que generalmente es una mala idea hacer consultas dentro de sus archivos de pantalla PHP directamente (separación de dudas). Hay muchas otras cosas que podrían mejorarse. Sin embargo, esto te ayudará a comenzar.

Fuente

2012-07-24 17:43:19

Dado que los datos de la lista desplegable de Subcategorías dependen de lo que se haya seleccionado en la categoría, es probable que desee utilizar ajax. Puede configurar un detector de eventos en su menú desplegable de categoría y cuando cambia puede solicitar los datos del menú desplegable de subcategorías y rellenarlos, hay muchas maneras diferentes de hacerlo, a continuación hay una opción (usando jquery) para obtenerlo empezado.

// warning sub optimal jquery code 
$(function(){ 

    // listen to events on the category dropdown 
    $('#cat').change(function(){ 

     // don't do anything if use selects "Select Cat" 
     if($(this).val() !== "Select Cat") { 

      // subcat.php would return the list of option elements 
      // based on the category provided, if you have spaces in 
      // your values you will need to escape the values 
      $.get('subcat.php?cat='+ $(this).val(), function(result){ 
       $('#subcat').html(result); 
      }); 

     } 

    }); 

});

Fuente

2012-07-24 17:49:07

hacen de esta estructura HTML en la página de aterrizaje

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?> 

<div id='sub_categories'></div>

hacer una función js asignado a la categoría desplegable

function loadSubCats(value) 
{ 
    $.post('load_sub_cats.php',{catid : value},function{data} 
              { 
               $('#sub_categories').html(data); 

              }); 

}

ahora en su load_sub_cats.php

<p><b>Subcat1:</b><br /> 
<?php 
    $catid = $_POST['cat_id'] 
    $query="SELECT id,subcat FROM subcat where catid = $catid"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

Necesitará para incluir jquery a este código de trabajo.

Fuente

2012-07-24 17:57:15

Completar otro menú desplegable de selección basado en la selección desplegable

Respuesta

Cuestiones relacionadas