Question

I have two drop down lists.
Second one is populated based on value chosen in the first one. I’m using Double Combo Script Credit By JavaScript Kit to do that (I am very bad with javascript).
I use this to filter results from my Mysql database.
The problem is that when user applies filter i want him to see what he applied (when page refreshes or user goes to other page) – those values should be seen as selected in both drop down lists. I can’t figure out where i should place an event or something else.

I’m holding subcategory values from the second drop down list in php session :

if (isset($_SESSION['subcat']) && !isset($_GET['subcat'])){
$color= $_SESSION['subcat'];
}
elseif (!isset($_SESSION['subcat']) && isset($_GET['subcat']))
{
    $_SESSION['subcat'] = mysql_real_escape_string($_GET['subcat']);
    $color= $_SESSION['subcat'];
    }
    elseif (isset($_SESSION['subcat']) && isset($_GET['subcat'])){
        unset($_SESSION['subcat']); 
        $_SESSION['subcat'] = mysql_real_escape_string($_GET['subcat']);
        $color= $_SESSION['subcat'];
        }
else {
    $color= "";
    };

I can echo selected in first drop down list, based on session value and that works, but a second one drop down list is not generated when page refreshes and i don’t know where should i echo ‘selected = “selected”‘ or maybe everything can be done only with javascript? Please help.

The code:

<div class="filter">
<form method="get" name="doublecombo" action="" id="filterform"  >
<select name="example" id="exampl" size="1" onChange="redirect(this.options.selectedIndex)">
<option>All kinds</option>
<option>Women</option>
<option>Men</option>
</select>
<select name="subcat" size="1" id="subcategory">
<option value="lists.php">All colors</option>
</select>
<input type="button" name="test" value="Filter" onClick="go()">
</p>

  <script>
  <!--

  /*
  Double Combo Script Credit
  By JavaScript Kit (www.javascriptkit.com)
  Over 200+ free JavaScripts here!
   */

     var groups=document.doublecombo.example.options.length
     var group=new Array(groups)
     for (i=0; i<groups; i++)
     group[i]=new Array()
     group[0][0]=new Option("All colors","list.php")

     group[1][0]=new Option("Pink","list.php?subcat=1 ")
     group[1][1]=new Option("White","list.php?subcat=2")
     group[1][2]=new Option("Green","list.php?subcat=3")


        group[2][0]=new Option("Black","list.php?subcat=12")
        group[2][1]=new Option("Blue","list.php?subcat=13")
        group[2][2]=new Option("Grey","list.php?subcat=14")
        group[2][3]=new Option("Brown","list.php?subcat=15")



        var temp=document.doublecombo.subcat

        function redirect(x){
        for (m=temp.options.length-1;m>0;m--)
        temp.options[m]=null
        for (i=0;i<group[x].length;i++){
        temp.options[i]=new Option(group[x][i].text,group[x][i].value)
         }
        temp.options[0].selected=true
         }

      function go(){
     location=temp.options[temp.selectedIndex].value
      }
       //-->
       </script>
       </form></div>

Answer 1

you could set a cookie to hold the selected value, so if the user selects there choice and refreshes, you would then check if the cookie exists and then populate the menus accordingly.

Update:

This will store the selected values and repopulate the select menus if the user refreshes the page.

First select added onkeup:

<select name="example" id="exampl" size="1" onchange="redirect(this.options.selectedIndex)" onkeyup="redirect(this.options.selectedIndex)">

for the second select and as follows to check for changes

<select name="subcat" size="1" id="subcategory" onchange="checks(this)" onkeyup="checks(this)">

Now find the Line temp.options[0].selected=true and add this directaly below

    createCookie("selected_option_1", x, 0);
     if(x==0){
       eraseCookie("selected_option_2");
     }

then add these two new function say at the bottom of your script block

 // checks if the Second Select has changed
 function checks(oWhich){
   createCookie("selected_option_2", oWhich.selectedIndex, 0);
 }

// repopulate the options base on selection thats saved in the cookies 
onload = function(){

if(readCookie("selected_option_1") != null) {

   redirect(document.doublecombo.example.options.selectedIndex = readCookie("selected_option_1"));

   if(readCookie("selected_option_2") != null) {
     document.doublecombo.subcat.options.selectedIndex = readCookie("selected_option_2");
  }
}

  } 

Finaly for these functions/scrip to work you will need

// The cookie script im using for the functions is located below include this and you chould ok. http://www.quirksmode.org/js/cookies.html#script

Now once the form has been submitted you GET the selected values as usual, and the REPOPULATE the menu, once you done with the cookie you could remove them.