Remember selected values from chained dropdown

Question

I have a chained dropdown menu with data from my database...

This is how it looks:

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" />';
}

?>

And this is my 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>

I want to remember the selected values from each dropdown after submit. So I can change the color on a easy way and not go trough all the dropdowns again...

I got it working for the first dropdown with:

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

It should work with the other dropdowns too isnt it?

And is it possible to show al the dropdowns and not one by one?

Thanks in advance

After I submitted the selected values I have to start all over with the first dropdown... So I have to select Make / Model / Year and Color again for only changing the color of the same car... Sorry I did not read it well... I mean... The second dropdown is shown after you selected something of the first one and so on... That is what I mean by "one by one" I want to show all dropdowns at once — user1511766, Feb 07 '13 at 15:15
Please [cache your jQuery selectors](http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-jquery-newbs-stop-jumping-in-the-pool/). — Cerbrus, Feb 07 '13 at 15:15

Salman · Answer 1 · 2013-02-07T18:36:18.920

0

I think you can do like this.

<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>

Just add a script tag after each select tag (or in the bottom if you want), and check if you have selected any option from the drop-down, if yes, then make it visible.

edited Feb 07 '13 at 18:36

answered Feb 07 '13 at 15:25

Salman

9,299
6
40
73

Hi, that doesnt work... The other dropdown boxex still are gone after I submit... So I cant even see if he does remember the input value\ – user1511766 Feb 07 '13 at 15:40
@user1511766 If you are able to get the value of each dropdown on the server, you should be able to select the previously selected option using the logic you made, and by adding a JS code after echoing the select tags will ensure them visible. – Salman Feb 07 '13 at 18:21
@user1511766 I'd even suggest, don't use conditional statement to select the option, use javascript way instead, shown in answer. – Salman Feb 07 '13 at 18:34

Remember selected values from chained dropdown

1 Answers1