actualizar combo

Danylo · #1 (**permalink**) 02/04/2007, 14:41

hola, el problema que tengo es el siguiente:
tengo 2 combos, de tal forma que la opcion que seleccione en el primero me sirva para que en el segundo la busqueda se haga mas pequeña, es decir: en el primero manejo nombre de zonas, en el segundo nombre de agencias, al seleccionar la zona, quiero que en el segundo solo me aparescan los nombres de las agencias que pertenecen a esa zona.

de antemano, gracias.

Antigol · #2 (**permalink**) 02/04/2007, 17:10

Necesitamos una respuesta a estas dos preguntas:

1) Al cambiar el combo de zonas, la pagina tiene que recargar y cargar el combo de agencias de la zona?

2) Al cambiar el combo de zonas queres que sin recargar la pagina se cargue el segundo combo?

Danylo · #3 (**permalink**) 02/04/2007, 22:34

Al cambiar el combo de zonas, se cargue el segundo combo sin recargar la pagina.

Muchas gracias por el interes

chalchis · #4 (**permalink**) 02/04/2007, 22:46

creo que lo que buscas es algo como esto

http://www.dhtmlgoodies.com/scripts/...ed-select.html

aqui descargalo

http://www.dhtmlgoodies.com/index.ht...chained_select

saludos
espero te sirva

Danylo · #5 (**permalink**) 12/04/2007, 12:13

si gracias, esa es la idea, pero la verdad es que soy un programador amateur y sin querer ser un inutil me gustaria que me ayudaran con un ejemplo en donde el combo se cargue con la informacion de una base de datos, de echo lo trate de modificar para que lo hiciera de esta forma pero no tuve exito.

gracias por su ayuda.

chalchis · #6 (**permalink**) 12/04/2007, 22:03

cual combo el primero o el segundo??

saludos

Cita:

Iniciado por Danylo

si gracias, esa es la idea, pero la verdad es que soy un programador amateur y sin querer ser un inutil me gustaria que me ayudaran con un ejemplo en donde el combo se cargue con la informacion de una base de datos, de echo lo trate de modificar para que lo hiciera de esta forma pero no tuve exito.

gracias por su ayuda.

chalchis · #7 (**permalink**) 12/04/2007, 22:16

en caso de que fuera el primero eh aqui un ejemplo

<select name="txsolicitante" onchange="this.form.submit()" class="areatx">
<option value=""></option>
<?
$conexion1 =mysql_connect($host,$user_host,$pas_host) or die("Error al realizar la conexion al servidor");
mysql_select_db($base_host,$conexion1) or die("Error al realizar la seleccion de la base de datos");
$result1=mysql_query("SELECT ID_DEPA,NOMBRE_DEPA,RESPONSABLE_DEPA FROM $DEPARTAMENTOS order by NOMBRE_DEPA ASC ", $conexion1);
while ($row1 = mysql_fetch_row($result1))
{
echo '<option value="'.$row1[2].'">';
echo $row1[1];
echo '</option>';
}
mysql_close ($conexion1);
?>
</select>

Danylo · #8 (**permalink**) 13/04/2007, 11:15

Gracias, eso si lo hice, el problema es que quiero que al seleccionar la zona en el primer combo quiero que en el segundo combo se carguen las agencias de la zona que seleccione en el primer combo, pero todo esto sin recargar toda la forma por que se borran los datos de otras cajas de texto que tengo antes.
Gracias por el interes mostrado.

chalchis · #9 (**permalink**) 13/04/2007, 11:19

se supone que el script te recarga el 2 combo sin perder informacion

Danylo · #10 (**permalink**) 13/04/2007, 11:25

y que le pongo al primer combo para que me mande la cve del la zona al segundo combo?

Danylo · #11 (**permalink**) 14/04/2007, 12:33

si no es mucho abusar, me podrian proporcinar un ejemplo de los dos combos?.

chalchis · #12 (**permalink**) 14/04/2007, 20:04

hijole pues el ejemplo que te puse de la apagina ahi lo explican todo
pero bueno aqui te lo vuelvo a describir

archivo index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ajax.js"></script>
<title>Documento sin título</title>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
}
select{
width:150px;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
/************************************************** ************************************************** ********
Ajax chained select
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com

************************************************** ************************************************** ********/
var ajax = new sack();

function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').optio ns.length = 0; // Empty city select box
if(countryCode.length>0){
ajax.requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax.onCompletion = createCities; // Specify function that will be executed after file has been found
ajax.runAJAX(); // Execute AJAX function
}
}

function createCities()
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax.response); // Executing the response from Ajax as Javascript code
}

</script>

</head>

<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">

</select>
</td>
</tr>
</table>
</form>

</body>
</html>

chalchis · #13 (**permalink**) 14/04/2007, 20:06

archivo getCities.php
<?php

if(isset($_GET['countryCode']))
{

switch($_GET['countryCode'])
{

case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";

break;
case "dk":

echo "obj.options[obj.options.length] = new Option('Aalborg','5');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','6');\n";
echo "obj.options[obj.options.length] = new Option('Odense','7');\n";

break;
case "us":

echo "obj.options[obj.options.length] = new Option('Atlanta','8');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','9');\n";
echo "obj.options[obj.options.length] = new Option('Denver','10');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','11');\n";
echo "obj.options[obj.options.length] = new Option('New York','12');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','13');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','14');\n";

break;
}
}

?>

chalchis · #14 (**permalink**) 14/04/2007, 20:06

archivo ajax.js

/* Simple AJAX Code-Kit (SACK) v1.6.1 */
/* ©2005 Gregory Wild-Smith */
/* www.twilightuniverse.com */
/* Software licenced under a modified X11 licence,
see documentation or authors website for more details */

function sack(file) {
this.xmlhttp = null;

this.resetData = function() {
this.method = "POST";
this.queryStringSeparator = "?";
this.argumentSeparator = "&";
this.URLString = "";
this.encodeURIString = true;
this.execute = false;
this.element = null;
this.elementObj = null;
this.requestFile = file;
this.vars = new Object();
this.responseStatus = new Array(2);
};

this.resetFunctions = function() {
this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteractive = function() { };
this.onCompletion = function() { };
this.onError = function() { };
this.onFail = function() { };
};

this.reset = function() {
this.resetFunctions();
this.resetData();
};

this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}

if (! this.xmlhttp) {
if (typeof XMLHttpRequest != "undefined") {
this.xmlhttp = new XMLHttpRequest();
} else {
this.failed = true;
}
}
};

this.setVar = function(name, value){
this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
if (true == returnvars) {
return Array(encodeURIComponent(name), encodeURIComponent(value));
} else {
this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
}
}

this.processURLString = function(string, encode) {
encoded = encodeURIComponent(this.argumentSeparator);
regexp = new RegExp(this.argumentSeparator + "|" + encoded);
varArray = string.split(regexp);
for (i = 0; i < varArray.length; i++){
urlVars = varArray[i].split("=");
if (true == encode){
this.encVar(urlVars[0], urlVars[1]);
} else {
this.setVar(urlVars[0], urlVars[1]);
}
}
}

this.createURLString = function(urlstring) {
if (this.encodeURIString && this.URLString.length) {
this.processURLString(this.URLString, true);
}

if (urlstring) {
if (this.URLString.length) {
this.URLString += this.argumentSeparator + urlstring;
} else {
this.URLString = urlstring;
}
}

// prevents caching of URLString
this.setVar("rndval", new Date().getTime());

urlstringtemp = new Array();
for (key in this.vars) {
if (false == this.vars[key][1] && true == this.encodeURIString) {
encoded = this.encVar(key, this.vars[key][0], true);
delete this.vars[key];
this.vars[encoded[0]] = Array(encoded[1], true);
key = encoded[0];
}

urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
}
if (urlstring){
this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
} else {
this.URLString += urlstringtemp.join(this.argumentSeparator);
}
}

this.runResponse = function() {
eval(this.response);
}

this.runAJAX = function(urlstring) {
if (this.failed) {
this.onFail();
} else {
this.createURLString(urlstring);
if (this.element) {
this.elementObj = document.getElementById(this.element);
}
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
this.xmlhttp.open(this.method, totalurlstring, true);
} else {
this.xmlhttp.open(this.method, this.requestFile, true);
try {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
} catch (e) { }
}

this.xmlhttp.onreadystatechange = function() {
switch (self.xmlhttp.readyState) {
case 1:
self.onLoading();
break;
case 2:
self.onLoaded();
break;
case 3:
self.onInteractive();
break;
case 4:
self.response = self.xmlhttp.responseText;
self.responseXML = self.xmlhttp.responseXML;
self.responseStatus[0] = self.xmlhttp.status;
self.responseStatus[1] = self.xmlhttp.statusText;

if (self.execute) {
self.runResponse();
}

if (self.elementObj) {
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
if (elemNodeName == "input"
|| elemNodeName == "select"
|| elemNodeName == "option"
|| elemNodeName == "textarea") {
self.elementObj.value = self.response;
} else {
self.elementObj.innerHTML = self.response;
}
}
if (self.responseStatus[0] == "200") {
self.onCompletion();
} else {
self.onError();
}

self.URLString = "";
break;
}
};

this.xmlhttp.send(this.URLString);
}
}
};

this.reset();
this.createAJAX();
}

Danylo · #15 (**permalink**) 16/04/2007, 12:46

gracias, ya lo tengo, estaba mal en un ciclo while.