2013-02-07 23 views
0

記住選定值我有從我的數據庫中的數據鏈接的下拉菜單...從鏈式下拉

這是它的外觀:

func.php

<?php 
//************************************** 
//  Page load dropdown results  // 
//************************************** 
function getTierOne() 
{ 
    $result = mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC") 
    or die(mysql_error()); 

     while($tier = mysql_fetch_array($result)) 

     { 
?> 
<option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' : '' ; ?>><?php echo $tier['make'];?></option> 
<?php 

     } 

} 

//************************************** 
//  First selection results  // 
//************************************** 
if (isset($_GET['func'])&& $_GET['func'] == "drop_1") { 
drop_1($_GET['drop_var']); 
} 

function drop_1($drop_var) 
{ 
    include_once('db.php'); 
    $result = mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model") 
    or die(mysql_error()); 

    echo '<select name="drop_2" id="drop_2"> 
      <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>'; 

      while($drop_2 = mysql_fetch_array($result)) 
      { 
       echo '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</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_1').val(), 
     drop_var2: $('#drop_2').val() 
     }, function(response){ 
     $('#result_2').fadeOut(); 
     setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400); 
     }); 
     return false; 
    }); 
</script>"; 
} 

//************************************** 
//  Second selection results  // 
//************************************** 
if (isset($_GET['func'])&& $_GET['func'] == "drop_2") { 
drop_2($_GET['drop_var'], $_GET['drop_var2']); 
} 

function drop_2($drop_var, $drop_var2) 
{ 
    include_once('db.php'); 
    $result = mysql_query("SELECT DISTINCT year FROM vehicles WHERE make='$drop_var' AND model='$drop_var2'") 
    or die(mysql_error()); 

    echo '<select name="drop_3" id="drop_3"> 
      <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>'; 

      while($drop_3 = mysql_fetch_array($result)) 
      { 
       echo '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>'; 
      } 

    echo '</select>'; 
    echo "<script type=\"text/javascript\"> 
$('#wait_3').hide(); 
    $('#drop_3').change(function(){ 
     $('#wait_3').show(); 
     $('#result_3').hide(); 
     $.get(\"func.php\", { 
     func: \"drop_3\", 
     drop_var: $('#drop_1').val(), 
     drop_var2: $('#drop_2').val(), 
     drop_var3: $('#drop_3').val() 
     }, function(response){ 
     $('#result_3').fadeOut(); 
     setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400); 
     }); 
     return false; 
    }); 
</script>"; 
} 

//************************************** 
//  Third selection results  // 
//************************************** 
if (isset($_GET['func'])&& $_GET['func'] == "drop_3") { 
drop_3($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3']); 
} 

function drop_3($drop_var, $drop_var2, $drop_var3) 
{ 
    include_once('db.php'); 
     $result = mysql_query("SELECT DISTINCT color FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'") 
    or die(mysql_error()); 

    echo '<select name="drop_4" id="drop_4"> 
      <option value=" " disabled="disabled" selected="selected">Selecteer Kleur</option>'; 

      while($drop_4 = mysql_fetch_array($result)) 
      { 
       if ($drop_4['color'] != "") { 
       echo '<option value="'.$drop_4['color'].'">'.$drop_4['color'].'</option>'; 
       } 
      } 

    echo '</select>'; 
    echo "<script type=\"text/javascript\"> 
$('#wait_4').hide(); 
    $('#drop_4').change(function(){ 
     $('#wait_4').show(); 
     $('#result_4').hide(); 
     $.get(\"func.php\", { 
     func: \"drop_4\", 
     drop_var: $('#drop_1').val(), 
     drop_var2: $('#drop_2').val(), 
     drop_var3: $('#drop_3').val(), 
     drop_var4: $('#drop_4').val() 
     }, function(response){ 
     $('#result_4').fadeOut(); 
     setTimeout(\"finishAjax_tier_five('result_4', '\"+escape(response)+\"')\", 400); 
     }); 
     return false; 
    }); 
</script>"; 
} 

//************************************** 
//  Fourth selection results  // 
//************************************** 
if(isset($_GET['func'])&& $_GET['func'] == "drop_4") { 
drop_4($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3'], $_GET['drop_var4']); 
} 
function drop_4($drop_var, $drop_var2, $drop_var3, $drop_var4) 
{ 
    include_once('db.php'); 
     $result = mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3' AND color='$drop_var4'") 
    or die(mysql_error()); 



      while($drop_5 = mysql_fetch_array($result)) 
       { 
       if ($drop_5['img'] != "") { 
       echo '<input type="checkbox" name="drop_5" id="drop_5" style="display:none;" checked value="'.$drop_5['img'].'"/>'; 

       } 
    } 
    echo '<input type="submit" name="submit" value="Submit" />'; 
} 

?> 

這是我的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=utf-8" /> 
     <link href="includes/css/style.css" type="text/css" rel="stylesheet" /> 
     <link href="includes/css/wt-gallery.css" type="text/css" rel="stylesheet" /> 
     <script type="text/javascript" src="includes/js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="includes/js/configuratie.js"></script> 
     <script type="text/javascript" src="includes/js/jquery.wt-gallery.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; 
    }); 
    $('#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("finishAjax2('result_2', '"+escape(response)+"')", 400); 
     }); 
     return false; 
    }); 
    $('#wait_3').hide(); 
    $('#drop_3').change(function(){ 
     $('#wait_3').show(); 
     $('#result_3').hide(); 
     $.get("func.php", { 
     func: "drop_3", 
     drop_var: $('#drop_3').val() 
     }, function(response){ 
     $('#result_3').fadeOut(); 
     setTimeout("finishAjax3('result_3', '"+escape(response)+"')", 400); 
     }); 
     return false; 
    }); 
}); 

function finishAjax(id, response) { 
    $('#wait_1').hide(); 
    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(); 
} 
function finishAjax2(id, response) { 
    $('#wait_2').hide(); 
    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(); 
} 
function finishAjax3(id, response) { 
    $('#wait_3').hide(); 
    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(); 
} 

function finishAjax_tier_three(id, response) { 
    $('#wait_2').hide(); 
    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(); 
} 
function finishAjax_tier_four(id, response) { 
    $('#wait_3').hide(); 
    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(); 
} 
function finishAjax_tier_five(id, response) { 
    $('#wait_4').hide(); 
    $('#'+id).html(unescape(response)); 
    $('#'+id).fadeIn(); 
} 
</script> 
     </head> 
<?php 
$website = "it"; 
    // configuratie file en db connect 
include "includes/inc/config.inc.php"; 
include('db.php'); 
include_once "class/slider.class.php"; 
include('func.php'); 
$slideralbum = new slideralbum($dbo); 
$sliders = $slideralbum->getSliderItems($website); 
?> 
<body> 
<p> 
<form name="product" action="" method="post"> 

    <select name="drop_1" id="drop_1"> 

     <option value="" selected="selected" disabled="disabled">Selecteer Merk</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> 
    <span id="wait_3" style="display: none;"> 
    <img alt="Please Wait" src="ajax-loader.gif"/> 
    </span> 
    <span id="result_3" style="display: none;"></span> 
    <span id="wait_4" style="display: none;"> 
    <img alt="Please Wait" src="ajax-loader.gif"/> 
    </span> 
    <span id="result_4" style="display: none;"></span> 
    <INPUT TYPE="button" VALUE="Refresh" onclick='location.reload()'> 
</form> 
</p> 
<p> 
<?php if(isset($_POST['submit'])){ 
    $drop = $_POST['drop_1']; 
    $drop_2 = $_POST['drop_2']; 
    $drop_3 = $_POST['drop_3']; 
    $drop_4 = $_POST['drop_4']; 
    $drop_5 = $_POST['drop_5']; 
?> 
<table border="1" bordercolor="#B5B5B5" style="background-color:#FFFFFF" width="250" cellpadding="3" cellspacing="3"> 
    <tr> 
     <td>Merk:</td> 
     <td><?php echo $drop;?></td> 
    </tr> 
    <tr> 
     <td>Model:</td> 
     <td><?php echo $drop_2;?></td> 
    </tr> 
    <tr> 
     <td>Bouwjaar:</td> 
     <td><?php echo $drop_3;?></td> 
    </tr> 
    <tr> 
     <td>Kleur:</td> 
     <td><?php echo $drop_4;?></td> 
    </tr> 
</table> 
<?php 
} 
?> 
<div id="banner-block">  <!-- Begin of Slideshow --> 
    <div class="container">   
     <div class="wt-gallery" style="width:920px; height:375px;"> 
      <div class="main-screen"> 
           <?php if(isset($_POST['submit'])){ 
    $drop = $_POST['drop_1']; 
    $drop_2 = $_POST['drop_2']; 
    $drop_3 = $_POST['drop_3']; 
    $drop_4 = $_POST['drop_4']; 
    $drop_5 = $_POST['drop_5']; 
?> 
        <img src="images/<?php echo $drop_5;?>" alt="<?php echo $drop_5;?>" width="920" height="360"/> 
<?php 
        } 
?> 
       <noscript> 
       <!-- placeholder image when javascript is off --> 
       <img src="../images/triworks_abstract27.jpg" alt=""/> 
       </noscript> 
      </div> 
      <div class="cpanel"> 
      <div class="thumbs-back"></div>       
       <div class="thumbnails"> 
        <ul> 
<?php $sliders = $slideralbum->getSliderItems($website, NULL); 
foreach($sliders as $slider){ 
?> 
         <li effect="none"> 
        <div> 
         <a href="<?php echo $slider->slider_img; ?>" height="360" width="720" alt="<?php echo $slider->slider_img; ?>" /> 
         <img src="<?php echo $slider->slider_tmb; ?>" height="70" width="125" alt="<?php echo $slider->slider_tmb; ?>" /> 
         </a> 
        </div> 
        <div class="data">  
        </div> 
         </li> 
<?php 
} 
?> 
        </ul> 
       </div>   
      <div class="thumbs-fwd"></div> 
     </div> 
    </div> 
</div> 
</div> 
</body> 
</html> 

我想記住提交後每個下拉列表中選定的值。所以,我可以改變顏色上的一個簡單的方法,而不是走線槽再次所有的下拉菜單...

我得到它的工作的第一個下拉具有:

<option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' : '' ; ?>><?php echo $tier['make'];?></option> 

應該與其他的下拉列表中工作太不是嗎?

是否可以顯示下拉列表而不是逐個顯示?

在此先感謝

+0

不要混淆JavaScript和Java。 –

+0

「不是一個人」是什麼意思? –

+0

我提交選定的值後,我必須從第一個下拉菜單開始...所以我必須再次選擇品牌/型號/年份和顏色,以改變同一輛車的顏色... 對不起,我做了不是很好的閱讀...我的意思是...第二個下拉列表顯示後,你選擇了第一個的東西,等等...... 這就是我所說的「一個一個」,我想顯示所有下拉菜單一次 – user1511766

回答

0

我認爲你可以這樣做。

<select id="sel1"> 
    <option value="<?php echo $tier['make'];?>"><?php echo $tier['make'];?></option> 
</select> 

<script> 
    var select = document.getElementById('sel1'); 
    select.value = <?php echo $tier['make']); ?> 
    if (select.selectedIndex != 0) { 
     select.style.display = ''; // Show the element 
    } 
</script> 

只需添加一個腳本標籤中的每個選擇標籤(或者,如果你想在底部)後,如果您選擇從下拉的任何選項,如果是,則使其可見檢查。

+0

嗨,這不工作...其他下拉框中我仍然沒有提交...所以我甚至不能看到他是否記得輸入值\ – user1511766

+0

@ user1511766如果你能夠得到每個下拉的價值服務器,您應該能夠使用您創建的邏輯來選擇先前選擇的選項,並且在回顯選擇標記後添加JS代碼將確保它們可見。 –

+0

@ user1511766我甚至建議,不要使用條件語句來選擇選項,而是使用javascript方式,而不是在答案中顯示。 –