problema con select Resulta que estoy practicando el desarrollo con ajax, y estoy haciendo una pequeña aplicacion que contiene 2 select, en el primer select pienso mostrar unas provincias y en el segundo pienso mostrar los municipios de la provincia seleccionada.
estoy desarrollando el codigo y acabe de terminar las instrucciones para que unicamente se muestren las provincias al cargase la pagina; estas provincias me las brinda el servidor desde un archivo php en formato XML.
mi codigo completo es el siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 16 - Listas desplegables</title>
<style type="text/css">
.lista{
width:200px;
border-radius:5px;
margin: 10px;
}
#opcion{
color: red;
}
</style>
<script type="text/javascript">
var READY_STATE_COMPLETE=4;
var peticion_http = null;
function inicializa_xhr() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function comprobarProvincia() {
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = MostrarProvincias;
peticion_http.open("GET", "auxiliares/cargaProvinciasXML.php?nocache="+Math.random(), true);
peticion_http.send(null);
}
}
function MostrarProvincias() {
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if (peticion_http.status == 200) {
var lista = document.getElementById("provincia");
lista.options[0] = new Option("- seleccionar -");
var documento_xml = peticion_http.responseXML;
alert(documento_xml); // me sale aviso con null y no con [objet document]
var raiz = documento_xml.getElementsByTagName("provincias")[0];
var provincias = raiz.getElementsByTagName("provincia");
var ciudad = null;
var codigo = null;
for(var i=0;i<provincias.length;i++){
ciudad = provincias[i].getElementsByTagName("nombre")[0].firstChild.nodeValue;
codigo = provincias[i].getElementsByTagName("codigo")[0].firstChild.nodeValue;
lista.options[i+1] = new Option(ciudad,codigo);
}
}
}
}
window.onload = function() {
comprobarProvincia();
}
</script>
</head>
<body>
<h1>Interaccion Listas Desplegables AJAX + XML</h1>
<label for="provincia">Seleccione una provincia</label>
<select id="provincia" class="lista">
</select>
<label for="departamento">Seleccione un Municipio</label>
<select id="departamento" class="lista">
</select>
</body>
</html>
-------------------------------------------------------------------------------------------------------
el código que tengo en el archivo php que suministra las provincias es:
-------------------------------------------------------------------------------------------------------
<?php
header('Content-Type: text/xml'');
$provincias["01"] = "Álava/Araba";
$provincias["02"] = "Albacete";
$provincias["03"] = "Alicante/Alacant";
$provincias["04"] = "Almería";
$provincias["33"] = "Asturias";
$provincias["05"] = "Ávila";
$provincias["06"] = "Badajoz";
$provincias["07"] = "Balears (Illes)";
$provincias["08"] = "Barcelona";
$provincias["09"] = "Burgos";
$provincias["10"] = "Cáceres";
$provincias["11"] = "Cádiz";
$provincias["39"] = "Cantabria";
$provincias["12"] = "Castellón/Castelló";
$provincias["51"] = "Ceuta";
$provincias["13"] = "Ciudad Real";
$provincias["14"] = "Córdoba";
$provincias["15"] = "Coruña (A)";
$provincias["16"] = "Cuenca";
$provincias["17"] = "Girona";
$provincias["18"] = "Granada";
$provincias["19"] = "Guadalajara";
$provincias["20"] = "Guipúzcoa/Gipuzkoa";
$provincias["21"] = "Huelva";
$provincias["22"] = "Huesca";
$provincias["23"] = "Jaén";
$provincias["24"] = "León";
$provincias["27"] = "Lugo";
$provincias["25"] = "Lleida";
$provincias["28"] = "Madrid";
$provincias["29"] = "Málaga";
$provincias["52"] = "Melilla";
$provincias["30"] = "Murcia";
$provincias["31"] = "Navarra";
$provincias["32"] = "Ourense";
$provincias["34"] = "Palencia";
$provincias["35"] = "Palmas (Las)";
$provincias["36"] = "Pontevedra";
$provincias["26"] = "Rioja (La)";
$provincias["37"] = "Salamanca";
$provincias["38"] = "Santa Cruz de Tenerife";
$provincias["40"] = "Segovia";
$provincias["41"] = "Sevilla";
$provincias["42"] = "Soria";
$provincias["43"] = "Tarragona";
$provincias["44"] = "Teruel";
$provincias["45"] = "Toledo";
$provincias["46"] = "Valencia/València";
$provincias["47"] = "Valladolid";
$provincias["48"] = "Vizcaya/Bizkaia";
$provincias["49"] = "Zamora";
$provincias["50"] = "Zaragoza";
foreach($provincias as $codigo => $nombre) {
$elementos_xml[] = "<provincia>\n<codigo>$codigo</codigo>\n<nombre>".$nombre."</nombre>\n</provincia>";
}
echo "<provincias>\n".implode("\n", $elementos_xml)."\n</provincias>";
?>
con lo anterior lo que quiero es que al cargar la pagina, se me muestre en el select primero, las provincias del archivo php; pero no se porque no me hace ese cometido, entonces estoy como emproblemado con eso
p.d: como pueden ver en el primer codig fuente, puse un alert despues que se recibe la respuesta del servidor para ver que contenia, por lo general muestra [object document] pero me sale es null.
Agradeceria sus ayudas
