Foros del Web » Programando para Internet » PHP »

SELECTS (JS y PHP)

Estas en el tema de SELECTS (JS y PHP) en el foro de PHP en Foros del Web. Finalmente terminé listas dependientes, y se los paso calientito. Antes que nada copien el "DUMP", guardenlo como insert.sql , o como quieran llamarlo Y EJECUTENLO. ...
  #1 (permalink)  
Antiguo 30/07/2003, 15:41
Avatar de biblio  
Fecha de Ingreso: enero-2002
Ubicación: Urano
Mensajes: 577
Antigüedad: 15 años, 11 meses
Puntos: 0
Sonrisa SELECTS (JS y PHP)

Finalmente terminé listas dependientes, y se los paso calientito.

Antes que nada copien el "DUMP", guardenlo como insert.sql, o como quieran llamarlo Y EJECUTENLO.

Esta parte lo hice a pedido de Cluster, jeje.

Código:
DROP TABLE IF EXISTS `categorias`;
CREATE TABLE `categorias` (
  `IdCategoria` tinyint(4) NOT NULL auto_increment,
  `Categoria` varchar(50) NOT NULL default '',
  PRIMARY KEY  (`IdCategoria`)
) TYPE=MyISAM AUTO_INCREMENT=9 ;

#
# Volcar la base de datos para la tabla `categorias`
#

INSERT INTO `categorias` (`IdCategoria`, `Categoria`) VALUES (1, 'Memorias');
INSERT INTO `categorias` (`IdCategoria`, `Categoria`) VALUES (2, 'Impresoras');
INSERT INTO `categorias` (`IdCategoria`, `Categoria`) VALUES (3, 'Redes LAN/WAN');
INSERT INTO `categorias` (`IdCategoria`, `Categoria`) VALUES (4, 'Multimedia');
# --------------------------------------------------------

#
# Estructura de tabla para la tabla `subcategorias`
#

DROP TABLE IF EXISTS `subcategorias`;
CREATE TABLE `subcategorias` (
  `IdSubCategoria` tinyint(4) NOT NULL auto_increment,
  `IdCategoria` tinyint(4) NOT NULL default '0',
  `SubCategoria` varchar(50) NOT NULL default '',
  PRIMARY KEY  (`IdSubCategoria`)
) TYPE=MyISAM PACK_KEYS=0 AUTO_INCREMENT=13 ;

#
# Volcar la base de datos para la tabla `subcategorias`
#

INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (1, 1, 'DDR PC266');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (2, 1, 'DIMM PC 66');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (3, 1, 'RIMM');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (4, 2, 'Matricial');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (5, 2, 'Laser');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (6, 2, 'Tinta');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (7, 3, 'HUB');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (8, 3, 'SWITCH');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (9, 3, 'Router');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (10, 4, 'Microfono');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (11, 4, 'Parlantes');
INSERT INTO `subcategorias` (`IdSubCategoria`, `IdCategoria`, `SubCategoria`) VALUES (12, 4, 'Camara');
Acá va el código, todo explicadito.

Código PHP:
<?php
if(isset($_POST['send'])){
    echo 
"El valor de Categoria : <b>".$_POST['cat']."</b><br>";
    echo 
"El valor de SubCategoria : <b>".$_POST['sub']."</b>";
}

$server  "192.168.1.8";
$user    "biblio";
$password"*******";
$database"test";    

$mysql mysql_connect($server$user$password) or die(mysql_error()); // hacemos la conexión al servidor MySQL 

mysql_select_db($database$mysql) or die(mysql_error()); // seleccionamos la base de datos MySQL

$sqlcat        "SELECT c.IdCategoria,c.Categoria "  // creamos nuestra consulta para (Categorias)
                
"FROM Categorias c "
                
"ORDER BY c.Categoria ASC";        

$sqlsubcat    "SELECT s.IdSubCategoria,s.IdCategoria,s.SubCategoria " // creamos nuestra consulta para (SubCategorias)
                
"FROM SubCategorias s "
                
"ORDER BY s.IdCategoria"// es imprescindible que esté ordenado de ese modo, vaya al final para leer mas 1(*). 

?>
<form name="main" method="post" action="lists.php">
  <select name="cat" style="width:180px;" onChange="_addList(this.form.cat[selectedIndex].value);">
  <option selected>seleccione una categoria</option>
<?php
    $resultcat 
mysql_query($sqlcat$mysql); //enviamos nuestra sentencia SQL($sqlcat) a MySQL

    
while($rows mysql_fetch_object($resultcat)) : // comenzamos a recorrer el resultado como un objeto
        
echo "<option value=".$rows->IdCategoria.">".$rows->Categoria."</option>\n"// imprimo en las opciones del combo
    
endwhile; 
?>
  </select>
  <select name="sub" style="width:180px;">
  </select>
 <input name="send" type="submit" id="send" value="Enviar">
 </form>
<script language="Javascript">
function _tupla( field1, field2 ){// que es tupla? informense por ustedes mismos, usen google, jeje
    this.field1 = field1;
    this.field2 = field2;
}

<?php
    $resultsubcat 
mysql_query($sqlsubcat$mysql);   //enviamos nuestra sentencia SQL($sqlsubcat) a MySQL 

    
$counterphp 0// variable que nos ayudará para generar loa arrays
    
$cat 0;         // variable para verificar cuando cambia el valor de (IdCategoria).

    
while($rows mysql_fetch_object($resultsubcat)):
        if (
$cat != $rows->IdCategoria){ // este if, detecta el cambio de la categoria
            
$counterphp 0// comienzo a contar en 0
            
$cat $rows->IdCategoria;
            echo 
"var option".$cat." = new Array();\n"// creamos un nuevo array, y lo imprimimos
        
}
        echo 
"option".$cat."[".$counterphp."]=new _tupla('".$rows->SubCategoria."','".$rows->IdSubCategoria."');\n"
        
$counterphp ++; // incrementamos el valor en uno 
    
endwhile;
?>

var counterjs; 

function _addList(array){// agego el contenido en "sub", a partir del valor de la opcion escogida en la lista "cat"
    _clearList();
    array = eval("option" + array);
    for (counterjs=0; counterjs < array.length; counterjs++) {
        // agregamos los valores correpondiente en el combo "sub"
        var optionObj = new Option( array[counterjs].field1, array[counterjs].field2 );
        main.sub.options[counterjs] = optionObj;
    } 
    main.sub.disabled = false; // habilito y mando el foco a "sub"
    main.sub.focus();


function _clearList() { // limpio el contenido de "sub"
    main.sub.length=0;
}

function _controlError() { // esta función nos ayuda controlar el error. 2(*)
    return true;
}

main.sub.disabled = true; // deshabilito el "sub"

window.onerror = _controlError;
</script>
 
<?php
    mysql_close
($mysql); // cerramos la conexion con MySQL

/*
(*) 
1.) La razón por la que debe ir ordenado por el "idcategoria" es,
porque al momento de hacer la comparación "$cat != $rows->IdCategoria", se produce un desorden, mostrando 
datos faltantes en el "sub".

2.) Cuando se produce el error?, cuando seleccionamos el "cat", y no hubo resultados para esa opcion.
Vale decir, cuando la categoria no tiene subcategorias. 
no me cree?. quite window.onerror = _controlError; y aumente una categoria. y ejecutelo.

NOTAS:
cat = me refiero a la lista desplegable 1, que contiene la categoria
sub = me refiero a la lista desplegable 2, que contiene la subcategoria
*/
?>
Cualquier comentario, y arreglo es bienvenido.

Saludos

Última edición por biblio; 30/07/2003 a las 22:43
  #2 (permalink)  
Antiguo 30/07/2003, 16:21
Ex Colaborador
 
Fecha de Ingreso: junio-2002
Mensajes: 9.091
Antigüedad: 15 años, 5 meses
Puntos: 16
Hola,

¿Puedo ser quisquilloso?

- Es mejor poner los value de los option entre comillas, aunque sean numeros. Creo que no ponerlas es un error en XHTML.

- No me gusta el estilo que usas para el while, con las etiquetas, quizas lia a los mas novatos que no conocen ambas sintaxis. La cambiaria por el {}, aunque ya se que es mas de gusto personal.

- No veo la razon de haer la variable javascript counterjs global, si me parece que solo la usas dentro de una funcion. Ya la declarara dentro de la funcion. Ya se que esto quizas le da igual a javascript, pero creo que es mas correcto. Pero otra vez es cuestion de gustos.

- No me convence eso de poner los estilos directamente en las etiquetas, creo que son mejor las hojas de estilo. Pero otra vez los gustos. Ademas, el que use el script lo tendra que cambiar, no se lo vamos a dar todo hecho.

- Podrias marcar como seleccionada la categoria que se selecciono. Simplemente poner selected en el option que coincide con el parametro enviado.

- Bueno, esto ultimo no es una critica a tu script, si no un comentario. Tambien se podria utilizar una tabla de datos, almacenando juntas las categorias y subcategorias. Seria simplemente añadiendo un campo id_padre que tenga la id de la categoria padre. En caso de ser una categoria, el valor seria 0 (sin padre). Luego seria modificar las dos consultas, haciendo la primera que solo coga las de id_padre=0 y la segunda las de id_padre!=0 y ordenada por id_padre.

Bueno, a ves que son detalles sin casi importancia. Por lo demas me parece un buen codigo, completo. Quizas falten un par de paranoias de seguridad como validar que el parametro es un numero, comprobar que se ejecutan bien las consultas.

Resumiendo buen codigo casi listo al 100% para poner directamente en una web.

Felicitaciones.
__________________
Josemi

Aprendiz de mucho, maestro de poco.
  #3 (permalink)  
Antiguo 30/07/2003, 16:37
Avatar de biblio  
Fecha de Ingreso: enero-2002
Ubicación: Urano
Mensajes: 577
Antigüedad: 15 años, 11 meses
Puntos: 0
Cita:
Podrias marcar como seleccionada la categoria que se selecciono. Simplemente poner selected en el option que coincide con el parametro enviado.
Un punto muy importante, lo pensé, pero el ejemplo está orientado a las dependencias, en la "segunda version" lo hago. El submit es sólo con la finalidad para ver los valores que se envian.

Saludos
  #4 (permalink)  
Antiguo 31/07/2003, 00:07
O_O
 
Fecha de Ingreso: enero-2002
Ubicación: Santiago - Chile
Mensajes: 34.417
Antigüedad: 15 años, 11 meses
Puntos: 126
Pues coincido con Josemi en los comentarios ...

Sólo hacer mención al tema de "rendimiento" .. (como ya comenté en el mensaje original que pusistes parte de este código ..) .. El hecho de cargar en un array javascript todos los elementos (registros) que arroje la tabla "categoria" y la tabla "subcategoria" .. en ciertos casos con gran cantidad de opciones este médodo puede no ser el más apropiado .. Pero como todo proyecto hay que evaluarlo ...

Si te animas .. y para que no quede en el olvido este mensaje .. Intenta hacer esa versión "segunda" y lo dejas en las FAQ's de este foro para que quede constancia (y así tendrán dos opciones para hacer "selects" dependientes)

Un saludo,
__________________
Por motivos personales ya no puedo estar con Uds. Fue grato haber compartido todos estos años. Igualmente los seguiré leyendo.
  #5 (permalink)  
Antiguo 31/07/2003, 11:34
Avatar de biblio  
Fecha de Ingreso: enero-2002
Ubicación: Urano
Mensajes: 577
Antigüedad: 15 años, 11 meses
Puntos: 0
Si leí el comentario que hiciste al respecto, considero que este tipo de ejemplo pude ser muy util para datos pequeños, en cuanto al rendimiento de JavaScript, no estoy muy enterado, aunque no sé si eso se deba al mismo, o a la máquina CLIENTE.

SIGAN CON LAS SUGERENCIAS DEL CASO, PARA VER DE QUE MODO SE PUDE MEJORAR.

Saludos
  #6 (permalink)  
Antiguo 31/07/2003, 11:45
Avatar de nuevo  
Fecha de Ingreso: mayo-2003
Ubicación: Spain
Mensajes: 2.009
Antigüedad: 14 años, 7 meses
Puntos: 2
a ver... a ver... para que sirve esto d las dependncias.... me lo podeis explicar asi por encima.... parece bastante interesante el codigo...
__________________
3w.valenciadjs.com
3w.laislatv.com
  #7 (permalink)  
Antiguo 01/08/2003, 12:37
Avatar de biblio  
Fecha de Ingreso: enero-2002
Ubicación: Urano
Mensajes: 577
Antigüedad: 15 años, 11 meses
Puntos: 0
Creo que falto aclarar eso verdad. Ahi explico brevemente.

Un ejemplo, asumamos que tenemos dos tablas uno PAISES y el otro CIUDADES, se entiende que por cada pais hay n CIUDADES. Entonces, lo que haces este ejemplo es, Al seleccionar en un determinado PAIS, te carga en el segundo COMBO/SELECT/LISTA, las ciudades correspondientes a ese PAIS.

No olvidar guardar relacion CIUDADES-PAISES, para este ejemplo.


Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 13:29.