Я нашел этот плагин для php / mysql / jquery трехколесного блока выбора. это сработало с этим методом: выберите поле, которое видно! после выбора любой option onload selectbox 2 и после выбора любой option onload last selectbox (3). теперь мои проблемы: select box 2 & 3 скрыт и показывается (видимо) после выбора option из prevuise selectbox. Мне нужно увидеть (показать) все три окна выбора и после выбора option показать результат в selectbox.
PHP func:
<?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> '; echo '<input type="submit" name="submit" value="Submit" />'; } ?>
JS & Index PHP:
include('db.php'); include('func.php'); <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> <body> <p> <form action="" method="post"> <select name="drop_1" id="drop_1"> <option value="" selected="selected" disabled="disabled">Select a Category</option> <?php getTierOne(); ?> </select> <span id="wait_1" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_1" style="display: none;"></span> <span id="wait_2" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_2" style="display: none;"></span> </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; } ?>вinclude('db.php'); include('func.php'); <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> <body> <p> <form action="" method="post"> <select name="drop_1" id="drop_1"> <option value="" selected="selected" disabled="disabled">Select a Category</option> <?php getTierOne(); ?> </select> <span id="wait_1" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_1" style="display: none;"></span> <span id="wait_2" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_2" style="display: none;"></span> </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; } ?>вinclude('db.php'); include('func.php'); <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> <body> <p> <form action="" method="post"> <select name="drop_1" id="drop_1"> <option value="" selected="selected" disabled="disabled">Select a Category</option> <?php getTierOne(); ?> </select> <span id="wait_1" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_1" style="display: none;"></span> <span id="wait_2" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_2" style="display: none;"></span> </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; } ?>вinclude('db.php'); include('func.php'); <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> <body> <p> <form action="" method="post"> <select name="drop_1" id="drop_1"> <option value="" selected="selected" disabled="disabled">Select a Category</option> <?php getTierOne(); ?> </select> <span id="wait_1" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_1" style="display: none;"></span> <span id="wait_2" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_2" style="display: none;"></span> </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; } ?>вinclude('db.php'); include('func.php'); <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> <body> <p> <form action="" method="post"> <select name="drop_1" id="drop_1"> <option value="" selected="selected" disabled="disabled">Select a Category</option> <?php getTierOne(); ?> </select> <span id="wait_1" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_1" style="display: none;"></span> <span id="wait_2" style="display: none;"> <img alt="Please Wait" src="ajax-loader.gif"/> </span> <span id="result_2" style="display: none;"></span> </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; } ?>
Спасибо за любую помощь. Я могу рассказать мне обо всех ex и demo с моим значением witout.