actualizacion de option select

[jordixip2]

Quiero hacer algo, pero aun no meh puseto a mirar como.

Tengo un par de option select rellenados con unas tablas, ahora bien.. resulta que ahora quiero que al seleccionar una opcion en uno de elles, me haga otra consulta para actualizarme el segundo option select. Es decir, eliminar todos los items y rellenarlo de nuevo con el item seleccionado del primer select.

¿Alguna sugerencia?

Gracias

[informa]

Yo encontré el siguiente script en internet (creo que en este mismo foro) y va de maravilla. Lo he modificado un poco para que te sea más comprensible para los novatos:

Es evidente que hace falta una base de datos con dos tablas: paises y provincias

primer_formulario.php:

Código:

<?php
include("conexion_base_de_datos.php");
echo "<form action=\"segundo_formulario.php\" method=\"POST\">\n\n";

    echo "<b>País: </b>";
   // Formar Selec "Padre".
   echo "<select name=\"pais\" onChange=\"this.form.submit()\">\n";
   echo "<option value=\"\"> Selecciona... </option>\n";
   $SQLconsulta_padre="SELECT * FROM paises";
   $consulta_padre = mysql_query($SQLconsulta_padre,$conexion) or 
die(mysql_error());

   While   ($registro_padre=mysql_fetch_assoc($consulta_padre)){
      // Se mira si el ID del registro es el mismo q el $id_nacion q recibimos si hemos cambiado el select hijo.
      // Se selecciona en consecuencia (selected) la opción elegida.
      if ($pais == $registro_padre['pais']){echo "<option value=\"".$registro_padre['pais']."\" selected>".$registro_padre['pais']."</option>\n";
      } else {echo "<option value=\"".$registro_padre['pais']."\">".$registro_padre['pais']."</option>\n";}
    }
   echo "</select>\n\n";
   mysql_free_result($consulta_padre); // Liberar memoria usada por consulta.

echo "<br /><b>Provincia:</b>";

if (!empty($pais)){ echo "<select name=\"provincia\">\n";echo "<option value=\"bbb\">Cualquier provincia..</option>";echo "</select>\n\n";
             } else {echo "<select name=\"provincia\">\n";echo "<option value=\"\">Elige antes un pais</option>";echo "</select>\n\n";}

echo "<br />";
echo "<input type=\"submit\" name=\"enviado\" value=\" Enviar \" >\n\n";
    echo "</form>\n";
?>

Este formulario envia los datos (onChange) al segundo_formulario.php:

Código:

<?php
$pais=$_POST["pais"];
$provincia=$_POST["provincia"];

include("conexion_base_de_datos.php");
echo "<form action=\"procesar_formulario.php\" method=\"POST\">\n\n";
//el pais lo ponemos SOLO con el dato del pais elegido
echo "<select name=\"pais\">\n";
              echo "<option value=\"$pais\">$pais</option>\n";
              echo "</select>\n\n";

//ahora ponemos el select de la provincia con solo los datos de provincias del pais elegido
if (!empty($pais)){
              $SQLconsulta_hija="SELECT * FROM provincias  WHERE pais='$pais'";
              $consulta_hija = mysql_query($SQLconsulta_hija,$conexion) or die(mysql_error());
                 if (mysql_num_rows($consulta_hija) != 0){
                 echo "<select class=\"option_bus\" name=\"provincia\">\n";
                    While($registro_hija=mysql_fetch_assoc($consulta_hija)){ echo "<option value=\"".$registro_hija['provincia']."\">".$registro_hija['provincia']."</option>\n";}
                    mysql_free_result($consulta_hija);
                    echo "</select>\n\n";
                    } else {echo "<input type=\"text\" name=\"provincia\" size=\"35\" maxlenght=\"35\" />";}
                 } else {echo "<select name=\"provincia\">\n";echo "<option value=\"\">Selecciona antes un pais</option>";echo "</select>\n\n";}

echo "<input type=\"submit\" name=\"enviado\" value=\" Enviar \" >\n\n";
    echo "</form>\n";
                 ?>

El script de procesar_formulario.php es el tipico de una página que procesa los datos de un formulario: primero recoger los datos enviados por post y luego procesarlos como convenga en cada caso.


Espero que te sirva.

[informa]

Y aqui va un ejemplo de la base de datos (solo un trocito):
Aqui esta un ejemplo de la base de datos:

-- phpMyAdmin SQL Dump
-- version 2.6.4-pl4
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 29-04-2010 a las 14:18:35
-- Versión del servidor: 5.0.17
-- Versión de PHP: 5.1.1
--
-- Base de datos: `mi_base_de_datos`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `paises`
--

CREATE TABLE `paises` (
`id` smallint(3) unsigned NOT NULL auto_increment,
`pais` varchar(15) collate latin1_spanish_ci NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci AUTO_INCREMENT=94 ;

--
-- Volcar la base de datos para la tabla `paises`
--

INSERT INTO `paises` VALUES (1, 'España');
INSERT INTO `paises` VALUES (2, 'Argentina');
INSERT INTO `paises` VALUES (3, 'Bolivia');
INSERT INTO `paises` VALUES (4, 'Chile');

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `provincias`
--

CREATE TABLE `provincias` (
`id` smallint(3) unsigned NOT NULL auto_increment,
`pais` varchar(15) collate latin1_spanish_ci NOT NULL default '0',
`provincia` varchar(30) collate latin1_spanish_ci NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci AUTO_INCREMENT=457 ;

--
-- Volcar la base de datos para la tabla `provincias`
--

INSERT INTO `provincias` VALUES (1, 'España', 'Alava');
INSERT INTO `provincias` VALUES (2, 'España', 'Albacete');
INSERT INTO `provincias` VALUES (3, 'España', 'Alicante');
INSERT INTO `provincias` VALUES (4, 'España', 'Almeria');
INSERT INTO `provincias` VALUES (5, 'España', 'Asturias');
INSERT INTO `provincias` VALUES (6, 'España', 'Avila');
INSERT INTO `provincias` VALUES (7, 'España', 'Badajoz');
INSERT INTO `provincias` VALUES (8, 'España', 'Barcelona');
INSERT INTO `provincias` VALUES (9, 'España', 'Burgos');
INSERT INTO `provincias` VALUES (10, 'España', 'Cáceres');
INSERT INTO `provincias` VALUES (11, 'España', 'Cádiz');
INSERT INTO `provincias` VALUES (12, 'España', 'Cantabria');
INSERT INTO `provincias` VALUES (13, 'España', 'Castellón');
INSERT INTO `provincias` VALUES (14, 'España', 'Ceuta');
INSERT INTO `provincias` VALUES (15, 'España', 'Ciudad Real');
INSERT INTO `provincias` VALUES (16, 'España', 'Córdoba');
INSERT INTO `provincias` VALUES (17, 'España', 'Cuenca');
INSERT INTO `provincias` VALUES (18, 'España', 'Gerona');
INSERT INTO `provincias` VALUES (19, 'España', 'Granada');
INSERT INTO `provincias` VALUES (20, 'España', 'Guadalajara');
INSERT INTO `provincias` VALUES (21, 'España', 'Guipuzcoa');
INSERT INTO `provincias` VALUES (22, 'España', 'Huelva');
INSERT INTO `provincias` VALUES (23, 'España', 'Huesca');
INSERT INTO `provincias` VALUES (24, 'España', 'Islas Baleares');
INSERT INTO `provincias` VALUES (25, 'España', 'Jaén');
INSERT INTO `provincias` VALUES (26, 'España', 'La Coruña');
INSERT INTO `provincias` VALUES (27, 'España', 'La Rioja');
INSERT INTO `provincias` VALUES (28, 'España', 'Las Palmas');
INSERT INTO `provincias` VALUES (29, 'España', 'León');
INSERT INTO `provincias` VALUES (30, 'España', 'Lérida');
INSERT INTO `provincias` VALUES (31, 'España', 'Lugo');
INSERT INTO `provincias` VALUES (32, 'España', 'Madrid');
INSERT INTO `provincias` VALUES (33, 'España', 'Málaga');
INSERT INTO `provincias` VALUES (34, 'España', 'Melilla');
INSERT INTO `provincias` VALUES (35, 'España', 'Murcia');
INSERT INTO `provincias` VALUES (36, 'España', 'Navarra');
INSERT INTO `provincias` VALUES (37, 'España', 'Orense');
INSERT INTO `provincias` VALUES (38, 'España', 'Palencia');
INSERT INTO `provincias` VALUES (39, 'España', 'Pontevedra');
INSERT INTO `provincias` VALUES (40, 'España', 'Salamanca');
INSERT INTO `provincias` VALUES (41, 'España', 'Segovia');
INSERT INTO `provincias` VALUES (42, 'España', 'Sevilla');
INSERT INTO `provincias` VALUES (43, 'España', 'Soria');
INSERT INTO `provincias` VALUES (44, 'España', 'Sta. Cruz de Tenerife');
INSERT INTO `provincias` VALUES (45, 'España', 'Tarragona');
INSERT INTO `provincias` VALUES (46, 'España', 'Teruel');
INSERT INTO `provincias` VALUES (47, 'España', 'Toledo');
INSERT INTO `provincias` VALUES (48, 'España', 'Valencia');
INSERT INTO `provincias` VALUES (49, 'España', 'Valladolid');
INSERT INTO `provincias` VALUES (50, 'España', 'Vizcaya');
INSERT INTO `provincias` VALUES (51, 'España', 'Zamora');
INSERT INTO `provincias` VALUES (52, 'España', 'Zaragoza');
INSERT INTO `provincias` VALUES (53, 'Argentina', 'Buenos Aires');
INSERT INTO `provincias` VALUES (54, 'Argentina', 'Catamarca');
INSERT INTO `provincias` VALUES (55, 'Argentina', 'Chaco');
INSERT INTO `provincias` VALUES (56, 'Argentina', 'Chubut');
INSERT INTO `provincias` VALUES (57, 'Argentina', 'Córdoba');
INSERT INTO `provincias` VALUES (58, 'Argentina', 'Corrientes');
INSERT INTO `provincias` VALUES (59, 'Argentina', 'Entre Rios');
INSERT INTO `provincias` VALUES (60, 'Argentina', 'Formosa');
INSERT INTO `provincias` VALUES (61, 'Argentina', 'Jujuy');
INSERT INTO `provincias` VALUES (62, 'Argentina', 'La Pampa');
INSERT INTO `provincias` VALUES (63, 'Argentina', 'La Rioja');
INSERT INTO `provincias` VALUES (64, 'Argentina', 'Mendoza');
INSERT INTO `provincias` VALUES (65, 'Argentina', 'Misiones');
INSERT INTO `provincias` VALUES (66, 'Argentina', 'Neuquen');
INSERT INTO `provincias` VALUES (67, 'Argentina', 'Rio Negro');
INSERT INTO `provincias` VALUES (68, 'Argentina', 'Salta');
INSERT INTO `provincias` VALUES (69, 'Argentina', 'San Juan');
INSERT INTO `provincias` VALUES (70, 'Argentina', 'San Luis');
INSERT INTO `provincias` VALUES (71, 'Argentina', 'Santa Cruz');
INSERT INTO `provincias` VALUES (72, 'Argentina', 'Santa Fe');
INSERT INTO `provincias` VALUES (73, 'Argentina', 'Santiago del Estero');
INSERT INTO `provincias` VALUES (74, 'Argentina', 'Tierra del Fuego,Ant,I.A.S.');
INSERT INTO `provincias` VALUES (75, 'Argentina', 'Tucumán');
INSERT INTO `provincias` VALUES (76, 'Bolivia', 'Beni');
INSERT INTO `provincias` VALUES (77, 'Bolivia', 'Chuquisaca');
INSERT INTO `provincias` VALUES (78, 'Bolivia', 'Cochabamba');
INSERT INTO `provincias` VALUES (79, 'Bolivia', 'La Paz');
INSERT INTO `provincias` VALUES (80, 'Bolivia', 'Oruro');
INSERT INTO `provincias` VALUES (81, 'Bolivia', 'Pando');
INSERT INTO `provincias` VALUES (82, 'Bolivia', 'Potosi');
INSERT INTO `provincias` VALUES (83, 'Bolivia', 'Santa Cruz');
INSERT INTO `provincias` VALUES (84, 'Bolivia', 'Tarija');
INSERT INTO `provincias` VALUES (85, 'Chile', 'Magallanes y A.Ch.');
INSERT INTO `provincias` VALUES (86, 'Chile', 'Metropolitana de Santiago');
INSERT INTO `provincias` VALUES (87, 'Chile', 'Reg. Aisen del Gen. Carlos Ib.');
INSERT INTO `provincias` VALUES (88, 'Chile', 'Reg. de Antofagasta');
INSERT INTO `provincias` VALUES (89, 'Chile', 'Reg. de Atacama');
INSERT INTO `provincias` VALUES (90, 'Chile', 'Reg. de Coquimbo');
INSERT INTO `provincias` VALUES (91, 'Chile', 'Reg. de La Araucaina');
INSERT INTO `provincias` VALUES (92, 'Chile', 'Reg. de Lib. Gen. B. O´Higgins');
INSERT INTO `provincias` VALUES (93, 'Chile', 'Reg. de Los Lagos');
INSERT INTO `provincias` VALUES (94, 'Chile', 'Reg. de O´Higgins');
INSERT INTO `provincias` VALUES (95, 'Chile', 'Reg. de Tarapaca');
INSERT INTO `provincias` VALUES (96, 'Chile', 'Reg. de Valparaiso');
INSERT INTO `provincias` VALUES (97, 'Chile', 'Reg. de Bio-Bio');
INSERT INTO `provincias` VALUES (98, 'Chile', 'Reg. de Maule');

-- --------------------------------------------------------

[informa]

Ahora soy yo quien pregunta a los expertos:

Código:

El primer script hace cargar la segunda página, que aunque en internet se ve igual a la primera, si el formulario es muy amplio, con muchos input, necesita una recarga y queda feo mientras realiza esa recarga.

Mi pregunta es: si por ejemplo tengo la página con varios divs:
<html>
<body>
<div id=cabecera">mi cabecera</div>
<div id="menu">mi menu</div>
<div id="cuerpo>el cuerpo de la pagina con el formulario ....
    <div id="empresa">por ejemplo el select de empresas</div>

    <div id="pais-provincia">
        <div id="pais">aqui el select con los paises</div>
        <div id="provincia">aqui el select con las provincias</div>
    </div>

   <div id="otros-selects">aqui mas selects</div>
   <div id="submit">Enviar</div>
</body>
</html>

¿Cómo puedo hacer para que SOLO se recargue el div id="pais-provincias"?

[jordixip2]

Hola,

he probado de dos maneras... y no hace nada en el segundo select,

function emptySelect(objID){
while($(objID).childNodes[0])
{
$(objID).removeChild($(objID).childNodes[0]);
}
}

function prueba()
{
// document.write('hola');
emptySelect('autor_select');
// document.busqueda.getElementById("autor_select").o ptions.length = 0;

}

[estefanosalazar]

Mas facil:

Código:

function agregaOpt( campo, txt, val, pos )	{
	var campoAf = document.getElementById( campo );
	
	var newOpt = new Option( txt, val );

	eval( campoAf.options[pos] = newOpt );
}

function removeOpt( campo )	{
	var campoAf = document.getElementById( campo );
	while( campoAf.options.length ) campoAf.remove(0);
}

Una funcion que rellena y otra que remueve.
Despues fijate si queres hacerlo que lo agregue con ajax, o directamente con JS.

Saludos!

[jordixip2]

Algo me dejo...

function removeOpt( campo ) {
var campoAf = document.getElementById( campo );
while( campoAf.options.length ) campoAf.remove(0);
}


function prueba()
{
// document.write('hola');
// emptySelect('autor_select');
// document.busqueda.getElementById('autor_select').o ptions.length = 0;
removeOpt('autor_select');

}

[GatorV]

Tema movido desde PHP a Javascript