Dynamic Drop Down Boxes

[bigrossco]

I know how to make drop down box's but what I want to do is if a user selects something fromt he first drop down box i.e. Make of Car, the second drop down box will show models for that make of car only, I know that this is possible just dont know how to code it

Thanks for your help,

Ross

[ToonMariner]

you will be needing either;

a, a MASSIVE javascript array populated when the age loads.

or (better option)

b, some ajax that will populate the select box based on the value of the other select boxes - this should be coded in such a way so that the page will work without javascript.

[bigrossco]

do you know where i can get help on doing one of the two options?

R

[suzzane2020]

here's a script tht 'll help
:

Just paste this script in the body tags and run it..before that a few changes where i have commented.
This script is based on  category table and its subcategory table:
<?php
//Your conection string
mysql_connect("localhost","root",'');
mysql_select_db("test");
$n=0;

//here i have states in one table and destinations in another

$res=mysql_query("SELECT states.stateid sID, states.name sname, destinations.did dID, destinations.name dname
FROM states, destinations  WHERE states.stateid = destinations.sid ");
while($row=mysql_fetch_array($res))
{
  extract ($row);
echo $stateid;
$TempArray1[n]=$sID.":".UCwords($sname).":".$dID.":".UCwords($dname)."~";
$arr1.=implode(",",$TempArray1);

$n++;
}

?>
//Javascript starts here
<script language="JavaScript" type="text/javascript">

function populateCountry1(value,arr,len)
{

var va=value;
var b=arr;

  var t=new Array();
t=b.split('~');

count=0;

var j;
var j=len;


  for(i=0;i<j;i++)
  { 
    temp=t[i].split(':');

 

    if(eval(temp[0])==eval(va))
    {
         
var newop=new Option(temp[3],temp[2]);
      document.world.destinations.options[count]=newop;
      count++;
    }
else {

// var newop=new Option('-- Select a Country First --',300);
document.world.destinations.options[count]=null;
var newop=new Option('-- Select a Level First --',300);
document.world.destinations.options[count]=newop;
}
    }


     
}


</script>
//Ends here

//then you you have the html tagsfor the two combo boxes

<form name="world" action="samepage" method="POST">
<select name="states" class="textbox" onChange="populateCountry1(this.options[selectedIndex].value,'<?php echo $arr1;?>','<?php echo $n;?>');">
    <option value='' selected>Select level</option>
<?php
  $res=mysql_query("select * from states");
  while($row=mysql_fetch_array($res))
  {
      extract ($row);
  ?>
  <option value="<?php echo $stateid;?>"><?php echo $name;?></option>
  <?php }?>
       
</select><br>
      Education
      <select name="destinations" class="textbox">
          <option value="300">-- Select a Level First --</option>
     
        </select>
</form>

[bigrossco]

When doing this i get the error

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/ewencooper/domains/ewencooper.co.uk/public_html/index.php on line 63

[suzzane2020]

cud u give the line where u get the error..so i cud check tht out

[suzzane2020]

its probabaly where u have te query codes
cud u paste the line where u get the error?

[fenway]

[quote author=bigrossco link=topic=123137.msg510429#msg510429 date=1169469081]
When doing this i get the error

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/ewencooper/domains/ewencooper.co.uk/public_html/index.php on line 63
[/quote]

You probably just have a msql syntax error... check mysql_error().

FYI, if this a relatively short list, there's no reason to hit the DB.

[bigrossco]

The line is the querey line. I am wanting to use a Database as it is going to be a large list (its going to be a list for makes and models of cars!)

$res=mysql_query("SELECT states.stateid sID, states.name sname, destinations.did dID, destinations.name dname
FROM states, destinations ");

This is what I am using just now (the same as the one put in, yes I do have the database for it) while($row=mysql_fetch_array($res))
{
      extract ($row);
  echo $stateid;
  $TempArray1[n]=$sID.":".UCwords($sname).":".$dID.":".UCwords($dname)."~";
  $arr1.=implode(",",$TempArray1);
 
  $n++;
}

the first part (while) is line 63

Thanks

R

[bigrossco]

I changed the querey to this;

$res=mysql_query("SELECT states.stateid sID, states.name sname, destinations.did dID, destinations.name dname
FROM states, destinations  WHERE states.stateid = destinations.dID");

and dont get the message now, in the drop down for the first part it dose show the state name but in the second box nothing is shown, but I know this is be cause of it having only 1 thing to show


      Education
      <select name="destinations" class="textbox">
          <option value="300">-- Select a Level First --</option>

        </select>

what I want it to do is show all destionations releated to the state selected

R

[fenway]

Well, you'll have to parse the result set to generate a hash by state, and then use that array inside for the 2nd dropdown.

[bigrossco]

this seems to be more difficult that i thought it would be lol is their any other way I can do this without a database for example?

As I thought it would be easyer than this lol unless its just something I have done wrong with the code?

The code I have in it is:

[code]

<?php
//Your conection string
mysql_connect("localhost","ewencooper_cars",'password');
mysql_select_db("ewencooper_cars");
$n=0;

//here i have states in one table and destinations in another

$res=mysql_query("SELECT states.stateid sID, states.name sname, destinations.did dID, destinations.name dname
FROM states, destinations  WHERE states.stateid = destinations.dID");
while($row=mysql_fetch_array($res))
{
      extract ($row);
  echo $stateid;
  $TempArray1[n]=$sID.":".UCwords($sname).":".$dID.":".UCwords($dname)."~";
  $arr1.=implode(",",$TempArray1);
 
  $n++;
}

?>

<script language="JavaScript" type="text/javascript">

function populateCountry1(value,arr,len)
{

  var va=value;
  var b=arr;
   
  var t=new Array();
  t=b.split('~');
 
  count=0;
 
  var j;
  var j=len;
 
           
  for(i=0;i<j;i++)
  { 
    temp=t.split(':');
 
 

    if(eval(temp[0])==eval(va))
    {
         
        var newop=new Option(temp[3],temp[2]);
            document.world.destinations.options[count]=newop;
            count++;
    }
    else {
   
  // var newop=new Option('-- Select a Make --',300);
          document.world.destinations.options[count]=null;
        var newop=new Option('-- Select a Make First --',300);
          document.world.destinations.options[count]=newop;
        }
    }
}
</script>


<form name="world" action="samepage" method="POST">
Make
<select name="states" class="textbox" onChange="populateCountry1(this.options[selectedIndex].value,'<?php echo $arr1;?>','<?php echo $n;?>');">
<option value='' selected>Select Make</option>
    <?php
      $res=mysql_query("select * from states");
      while($row=mysql_fetch_array($res))
      {
        extract ($row);
        ?> 
<option value="<?php echo $stateid;?>"><?php echo $name;?></option>
    <?php }?>
           
</select>
<br>
<Br>
      Model
      <select name="destinations" class="textbox">
          <option value="300">-- Select a Make First --</option>





        </select>
      </form>
[/code]

Could it be something to do with the java script coding?

R

[fenway]

I've confused about your PHP/JS code... you need to hash the results by state name, and in each key's value, store the array of destinations.  You have implodes, joins, and splits for no reason.

[bigrossco]

[quote author=fenway link=topic=123137.msg513874#msg513874 date=1169814216]
you need to hash the results by state name, and in each key's value, store the array of destinations. 
[/quote]

How would I go about doing this?

[fenway]

I don't know the PHP syntax... but in psuedo-code:

1) Make a states hash
2) Iterate though the result set
3) Push the destination onto an array for the matching state hash key

In Perl, this is easyl