¿cuál es la mejor forma de hacerlo?

Bram · #1 (**permalink**) 20/05/2008, 09:28

Hola! soy novatillo con el DOM y no sé cual es la mejor forma de hacer lo siguiente.

Tengo dos selects, una para seleccionar provincias y la otra por las poblaciones. La gracia es que al seleccionar, por ejemplo, madrid, se actualiza dinamicamente la otra lista y se cargan las poblaciones de Madrid.

Lo que no sé hacer es actualizar la lista. El script php devuelve lo siguiente:

<option>poblacion1</option>
<option>poblacion2</option>
....

Como actualizo toda la lista con el DOM?

Lo más eficiente seria sustituir todas las opciones por lo que devuelve el php, o canviar todo el select entero. Lo que no es viable es sacarlas una a una y luego entrarlas una a una. Hay provincias que tienen centenares de poblaciones, y se trata de una funcionalidad de uso muy común en el site. Debe ser lo más eficiente possible.

por si teneis dudas podeís ver el proyecto aquí:
http://www.trabajillos.es/PHP/

Ideas?

Ivan

quimfv · #2 (**permalink**) 21/05/2008, 06:40

Un span donde esten las opciones y substituir su contenido....

<option></option>

<option>poblacion2</option>
...


Pediste ideas no lo he probado....

Quim

mgusdl · #3 (**permalink**) 21/05/2008, 09:18

Antes de cargar las nuevas poblaciones al cambiar de provincia, elimina todos los hijos del select y antes del bucle que rellena el select incluye un elemento en blanco y punto pelota.

Lo del span dentro de un select es una barbaridad, para agrupar las opciones existe el optgroup, pero no es lo que necesitas.

para eliminar todos los elementos del select

Código:

document.forms.formulario.camposelect.options.length = 0;

o bien

Código:

document.getElementById('camposelect').options.length = 0;

quimfv · #4 (**permalink**) 22/05/2008, 01:00

Si me equivoque de una linea o dos ...

Voy a poner el ejemplo mas simple, la mejor forma para mi seria disponer de una base de datos con los municipios

TablaMunicipios
idMunicipio
idProvincia
NombreMunicipio

luego seria facil construir un archivo php capaz de devolver un select con los municipios de la provincia elegida.

Pero vamos a poner un ejemplo mas sencillo solo con html y js:

Archivo provmunis.html

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/javascript" src="funcions.js"></script>
<body>
<table width="10%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><select name="provincia" onChange="cambiaMunicipis('optionmuni',this)">
  <option value="00"></option>
  <option value="08">Barcelona</option>
  <option value="43">Tarragona</option>
</select></td>
  </tr>
  <tr>
    <td>
    <span id="optionmuni">
	<select name="municipio">
	<option value="00">Primero elija provincia</option>
    </select>
	</span>   
</td>
  </tr>
</table>
</body>
</html>

Archivo funcions.js

Código HTML:

function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id + 
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}
 
function cambiaMunicipis(id,obj){
if (obj.value!="00"){
    url=obj.value + ".html";
	clientSideInclude(id, url);
}
}

Archivos de provincias, estos se podrian sustituir por un archivo php (jsp, asp o lo que sea) que pasandole el id de provincia nos devuelva el select con los municipios de dicha provincia, pero como no tengo php aqui, vamos a hacerlo com un html para cada provincia

Archivo 08.html (Barcelona)

Código HTML:

<select name="municipio">
	<option value="00"></option>
	<option value="01">Barcelona</option>
	<option value="02">Sabadell</option>
</select>

Archivo 43.html (Tarragona)

Código HTML:

<select name="municipio">
	<option value="00"></option>
	<option value="01">Tarragona</option>
	<option value="02">Reus</option>
</select>

Y ahi tenemos la barbaridad funcionando, solo he movido el inicio del un par de lineas mas arriba, ya he dicho que me habia equivocado, lo siento.

Quim

Recordatorio

Cita:

Un span donde esten las opciones y substituir su contenido....

<option></option>

<option>poblacion2</option>
...


Pediste ideas no lo he probado....

Quim

aaah!!!! punto pelota.

Bram · #5 (**permalink**) 27/05/2008, 08:16

gracias quimfv, me ha servido tu solución!