Ciao a tutti, ho un piccolo problema con javascript e php che non mi lascia dormire e spero voi possiate aiutarmi.
Allora, sto cercando di costruire delle select che si auto aggiornano in seguito alla precedente select. Il tutto prende i dati da una sola tabella MySQL.
Ho trovato il seguente script sul web ma non riesco ad adattarlo in modo che la terza select si aggiorni in funzione delle DUE precedenti e non solo della precedente. Spero possiate aiutarmi e vi ringrazio già in anticipo.
index.php:
func.php:Codice PHP:<?php include('db.php'); include('func.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=utf-8" /><title>Chained Select Boxes using PHP, MySQL and jQuery</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){ $('#wait_1').show(); $('#result_1').hide(); $.get("func.php", { func: "drop_1", drop_var: $('#drop_1').val() }, function(response){ $('#result_1').fadeOut(); setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400); }); return false; });});
function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn();}function finishAjax_tier_three(id, response) { $('#wait_2').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn();}</script></head>
<body><p><form action="" name="form" method="post"> <select name="drop_1" id="drop_1"> <option value="" selected="selected" disabled="disabled">Select a Category</option> <?php getTierOne(); ?> </select><br> <span id="wait_1" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_1" style="display: none;"></span><br> <span id="wait_2" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_2" style="display: none;"></span><br> </form></p><p><?php if(isset($_POST['submit'])){ $drop = $_POST['drop_1']; $drop_2 = $_POST['drop_2']; $drop_3 = $_POST['drop_3']; echo "You selected a "; echo $drop_3." ".$drop." ".$drop_2;}?></body></html>
Codice PHP:<?php//**************************************// Page load dropdown results ////**************************************function getTierOne(){ $result = mysql_query("SELECT DISTINCT tier_one FROM three_drops") or die(mysql_error());
while($tier = mysql_fetch_array( $result )) { echo '<option value="'.$tier['tier_one'].'">'.$tier['tier_one'].'</option>'; }
}
//**************************************// First selection results ////**************************************if($_GET['func'] == "drop_1" && isset($_GET['func'])) { drop_1($_GET['drop_var']); }
function drop_1($drop_var){ include_once('db.php'); $result = mysql_query("SELECT DISTINCT tier_two FROM three_drops WHERE tier_one='$drop_var'") or die(mysql_error()); echo '<select name="drop_2" id="drop_2"> <option value=" " disabled="disabled" selected="selected">Choose one</option>';
while($drop_2 = mysql_fetch_array( $result )) { echo '<option value="'.$drop_2['tier_two'].'">'.$drop_2['tier_two'].'</option>'; } echo '</select>'; echo "<script type=\"text/javascript\">$('#wait_2').hide(); $('#drop_2').change(function(){ $('#wait_2').show(); $('#result_2').hide(); $.get(\"func.php\", { func: \"drop_2\", drop_var: $('#drop_2').val() }, function(response){ $('#result_2').fadeOut(); setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400); }); return false; });</script>";}
//**************************************// Second selection results ////**************************************if($_GET['func'] == "drop_2" && isset($_GET['func'])) { drop_2($_GET['drop_var']); }
function drop_2($drop_var){ include_once('db.php'); $result = mysql_query("SELECT * FROM three_drops WHERE tier_two='$drop_var'") or die(mysql_error()); echo '<select name="drop_3" id="drop_3"> <option value=" " disabled="disabled" selected="selected">Choose one</option>';
while($drop_3 = mysql_fetch_array( $result )) { echo '<option value="'.$drop_3['tier_three'].'">'.$drop_3['tier_three'].'</option>'; } echo '</select><br>'; echo '<input type="submit" name="submit" value="Submit" />';}?>
Rispondi quotando
comunque un po' di php lo so e ho appena iniziato a studiare js. Quindi mi consigli di creare prima le tre funzioni php che recuperano i dati da MySQL e poi solo dopo integrarci ajax?
