Bueno me base en un ejemplo de ajax(la verdad es algo complicado para mique ando aprendiendo), no quedo del todo como yo queria, pero bueno, ocupas bajarte el zip que dan
aqui
Los archivos que no cambian son
jsrsServer.php.inc
result.php
jsrsClient.js
style.css
Y reemplaza estos archivos por los que voy a postear
selectphp.js
Código PHP:
/**************************************************************
result.php by Milfson ([email protected]) 17.04.2004
Milfson added preselect(parameters...) to pre-populate dropdowns with default values.
Thanks for the code! - Brent.
***************************************************************/
// constants
var noValue = '-99';
// default values
var IDMake = noValue;
var IDModel = noValue;
var IDOptions = noValue;
//selects disabled true/false
var boolEnabled = true;
// globals
var curOption = new Array();
var isLoaded = new Array();
function initLists(){
// initialize lists
emptyList( 'lstPais' );
emptyList( 'lstEstado');
emptyList( 'lstCiudades' );
jsrsExecute( 'select_rs.php', cbFillMake, 'makeList');
}
function preselect(idMake,idModel,idOptions,selectable){
boolEnabled = selectable;
IDMake = idMake;
IDModel = idModel;
IDOptions = idOptions;
initLists();
}
function lstPais_onChange(){
var val = this.options[this.selectedIndex].value;
IDMake = val;
IDModel = noValue;
IDOptions = noValue;
if(val == noValue){
selectOption( this.name, curOption[this.name] )
} else {
curOption[this.name] = val;
// init dependent lists
emptyList( 'lstEstado' );
emptyList( 'lstCiudades');
window.status = 'Loading Model Selections...';
jsrsExecute( 'select_rs.php', cbFillModel, 'modelList', val);
}
}
function lstEstado_onChange(){
var val = this.options[this.selectedIndex].value;
if(val == noValue){
selectOption( this.name, curOption[this.name] )
} else {
curOption[this.name] = val;
emptyList( 'lstCiudades');
window.status = 'Loading Options Selections...';
jsrsExecute( 'select_rs.php', cbFillOptions, 'optionsList', val);
}
}
function lstCiudades_onChange(){
var val = this.options[this.selectedIndex].value;
IDOptions = val;
if(val == noValue){
selectOption( this.name, curOption[this.name] )
} else {
var msg = "You have selected: \n\n";
msg += this.form.lstPais.options[this.form.lstPais.selectedIndex].text + "\n";
msg += this.form.lstEstado.options[this.form.lstEstado.selectedIndex].text + "\n";
msg += this.options[this.selectedIndex].text + "\n";
//alert (msg);
if(boolEnabled){
document.getElementById('cmdSubmit').disabled="";
document.getElementById('show').style.backgroundColor="#FFCC99";
}
}
}
function cbFillMake ( strMakes ){
window.status = '';
fillList( 'lstPais', strMakes );
if(IDMake != noValue){
jsrsExecute( 'select_rs.php', cbFillModel, 'modelList', ''+IDMake+'');
}
}
function cbFillModel ( strModels ){
// callback for dependent listbox
window.status = '';
fillList( 'lstEstado', strModels );
if(IDModel != noValue){
jsrsExecute( 'select_rs.php', cbFillOptions, 'optionsList', ''+IDModel+'');
}
}
function cbFillOptions( strOptions ){
// callback for dependent listbox
window.status = '';
fillList( 'lstCiudades', strOptions );
}
function fillList( listName, strOptions ){
// fill any list with options
emptyList( listName );
// always insert selection prompt
var lst = document.forms['QForm'][listName];
lst.disabled = true;
//lst.options[0] = new Option('=> Seleccione una opcion <=', noValue);
// options in form "value~displaytext|value~displaytext|..."
var aOptionPairs = strOptions.split('|');
for( var i = 0; i < aOptionPairs.length; i++ ){
if (aOptionPairs[i].indexOf('~') != -1) {
var aOptions = aOptionPairs[i].split('~');
lst.options[i] = new Option(aOptions[1], aOptions[0]);
}
}
switch(listName){
case 'lstPais':
ID = IDMake;
break;
case 'lstEstado':
ID = IDModel;
break;
case 'lstCiudades':
ID = IDOptions;
break;
}
// init to no value
selectOption( listName, ID );
isLoaded[listName] = true;
lst.disabled = !boolEnabled;
lst.onchange = eval( listName + "_onChange" );
// eval( "document.forms['QForm']['" + listName + "'].onchange=" + listName + "_onChange;" );
lst.selectedIndex = -1;
}
function emptyList( listName ){
var lst = document.forms['QForm'][listName];
lst.options.length = 0;
lst.onchange = null;
lst.disabled = boolEnabled;
isLoaded[listName] = false;
curOption[listName] = noValue;
}
function selectOption( listName, optionVal ){
// set list selection to option based on value
var lst = document.forms['QForm'][listName];
for( var i = 0; i< lst.options.length; i++ ){
if( lst.options[i].value == optionVal ){
lst.selectedIndex = i;
curOption[listName] = optionVal;
return;
}
}
}
select.php
Código PHP:
<html>
<head>
<title>Ciudades del Mundo</title>
<script language="javascript" src="jsrsClient.js"></script>
<script language="javascript" src="selectphp.js"></script>
</head>
<?php
$make = isset($_POST['lstPais']) ? $_POST['lstPais'] : -99;
$model = isset($_POST['lstEstado']) ? $_POST['lstEstado'] : -99;
$options = isset($_POST['lstCiudades']) ? $_POST['lstCiudades'] : -99;
?>
<body onload="preselect('<?php echo $make;?>', '<?php echo $model;?>', '<?php echo $options;?>', 1);" onhelp="jsrsDebugInfo();return false;">
<h3>Pues aun faltan detalles, pero las funciones basicas ya estan</h3>
<form name="QForm" method="post" action="./recibido.php">
<div id="sel">
<table class="normal" width="575" BORDER="0" CELLSPACING="2" CELLPADDING="2" VALIGN="TOP">
<?php
SelectBox ("Pais", "lstPais");
SelectBox ("Estado", "lstEstado");
SelectBox ("Ciudad", "lstCiudades");
?>
</table>
<div id="show">
<input type="submit" name="cmdSubmit" value="Submit" id="cmdSubmit" title="Show selects with preselected values" style="" /><br />
(submits to second page which preselects current values in another form like this)
</div>
</div>
</form>
</body>
</html>
<?php
function SelectBox( $Label, $selectName ){
?>
<tr ALIGN="LEFT">
<td width="15%"><?php echo $Label ?></td>
<td align="left">
<select name="<?php echo $selectName ?>">
<option></option><option></option><option></option>
<option>--------- Not Yet Loaded ---------</option>
</select>
</td>
</tr>
<?php
}
?>
select_rs.php
Código PHP:
<?php
require("jsrsServer.php.inc");
jsrsDispatch( "makeList modelList optionsList" );
function makeList() {
return serializeSql( "SELECT country_id,name FROM countries" );
}
function modelList( $makeID ){
return serializeSql("select state_id, name FROM states WHERE country_id=" . $makeID . " order by name");
}
function optionsList( $modelID ){
return serializeSql("select id, name FROM cities WHERE state_id=" . $modelID . " order by name");
}
function serializeSql( $sql ){
$link = mysql_connect("localhost", "usuario", "password");
mysql_select_db ("nombre de la base");
$result = mysql_query ($sql);
$s = '';
while ($row = mysql_fetch_row($result)) {
$s .= join( $row, '~') . "|";
}
mysql_close($link);
if($s == null){
$s = "NoValue~No hay registros";
}
return $s;
}
?>
crea un archivo llamado recibido con esto de contenido para que veas lo que te llega y pues tu ya sabras que hacer con el
Código PHP:
<?php
print_r($_POST);
?>
Espero que no me haya faltado nada, pruebalo y me avisas.
Salu2
