Page 1 of 1

2 Select controls

Posted: Tue Feb 18, 2003 7:59 am
by wizzard
Hello,

I have a question i have 2 select controls : <select></select>...

Now what i want in realtime is if you select another option in the first select control then i want in the second that the option will be changed for the selected one like

First one is category Computers, Music if the user choose Computers the second Select control will show only the values for computers. I hope you understand what i mean? Is this possible.

Cheers
Kris

Posted: Tue Feb 18, 2003 8:03 am
by twigletmac
This is possible, however, to do it using PHP you would have to reload the page once the first option was chosen.

Mac

Posted: Tue Feb 18, 2003 8:05 am
by wizzard
How can i reload the page?

Posted: Tue Feb 18, 2003 8:25 am
by lazy_yogi
You would want JavaScript for that.

Its a definite client-side situation

I haven't used it .. so I can't help, but you definitely want to use JavaSctipt for that. That's the strength of JS

Posted: Tue Feb 18, 2003 8:33 am
by daven
Personally, I use PHP combined with Javascript. This way you do not need to reload the page (which you can do with a header call) or do multiple SQL queries. I just ripped this code out of one of my applications, so the table/column names are specific to my code. But you should be able to follow it. Any problems, let me know.

The DB tables I used has the following structure. Each area can have multiple categories

Code: Select all

&#1111;u]Category&#1111;/u]
category_ID
category_AreaID
category_Name

&#1111;u]Area&#1111;/u]
area_ID
area_Name
The Javascript function and PHP to generate the relevant arrays

Code: Select all

<!---------------------------
Tiered select boxes
------------------------->
<script language="javascript">
<!--
<?php
$result_select=mysql_query($qry_category_all, $conn);
$area_ID=0;
while($row=mysql_fetch_assoc($result_select)){
  if($row[category_AreaID]!=$area_ID){
    $area_ID=$row[category_AreaID];
    $i=1; // re-initialize the counter for each area
    // Create an array for each area
    print "var cat_array_".$area_ID." = new Array();";
    print "cat_array_".$area_ID."[0] = new Array();";
    print "cat_array_".$area_ID."[1] = new Array();";
  }
  print "cat_array_".$area_ID."[0][".$i."] = "".$row[category_ID]."";";
  print "cat_array_".$area_ID."[1][".$i."] = "".$row[category_Name]."";";
  $i++;
}
while($p_row=mysql_fetch_assoc($result_post2)){
  $post_ID=$p_row[post_ID]; 
  // this is here because I have multiple select box pairs on the same page.  I had to name the forms dynamically so I could access them.  You should not need to do this
  ?>
  function Populate_<?=$post_ID?>(){
    // reset drop down
    document.form_<?=$post_ID?>.category_ID.length = 1;
    document.form_<?=$post_ID?>.category_ID[0].value = "";
    document.form_<?=$post_ID?>.category_ID[0].text = "Choose a Category";
    document.form_<?=$post_ID?>.category_ID[0].selected = true;
    // Only process the function if the first item (blank) is not selected.
    if (document.form_<?=$post_ID?>.area_ID.selectedIndex>0){
      var selected_Area = document.form_<?=$post_ID?>.area_ID[document.form_<?=$post_ID?>.area_ID.selectedIndex].value;
      var len= eval("cat_array_"+selected_Area+"[0].length");
      document.form_<?=$post_ID?>.category_ID.length = len;
      // Put a null as the first option in the drop-down
      document.form_<?=$post_ID?>.category_ID[0].value = "";
      document.form_<?=$post_ID?>.category_ID[0].text = "Choose a Category";
      document.form_<?=$post_ID?>.category_ID[0].selected = true;
      // Loop through the array and populate the drop down.
      for (i=1; i<=len; i++){
        document.form_<?=$post_ID?>.category_ID[i].value = eval("cat_array_" + selected_Area + [0][i]");
        document.form_<?=$post_ID?>.category_ID[i].text = eval("cat_array_" + selected_Area + "[1][i]");
      }
    }
  }
<?php}?>
//-->
</script>
The Select boxes

Code: Select all

&lt;td colspan=2&gt;Copy post to another category &lt;/td&gt;
&lt;td colspan=2&gt;
&lt;select name="area_ID" size=1 onchange="Populate_&lt;?=$row_post&#1111;post_ID]?&gt;()"&gt;
  &lt;option value=0&gt;Choose an Area&lt;/option&gt;						  &lt;?for($i=0;$i&lt;$area_count;$i++)&#123;print "&lt;option value=".$area_array&#1111;0]&#1111;$i]."&gt;".$area_array&#1111;1]&#1111;$i];&#125;?&gt;
  &lt;/select&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;select name="category_ID"&gt;
  &lt;option value=0&gt;Choose an Area&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;
[/u]

Posted: Tue Feb 18, 2003 9:00 am
by wizzard
thanks guys for the help!

More Info

Posted: Fri Feb 28, 2003 7:57 am
by Etherguy
Daven.

Do you happen to have anymore info on this.. I consider myself pretty proficent in PHP, but I am a little confused on the DB side of this script.

Is there anyother code snippets for the DB access? Like where you got these variables from
$result_select=mysql_query($qry_category_all, $conn);
Thanks In advance.

Posted: Fri Feb 28, 2003 9:21 am
by daven
My DB structure was as follows:

Table Area:

Code: Select all

area_ID  INT
area_Name  VARCHAR
Table Category:

Code: Select all

category_ID  INT
category_AreaID  INT  // linked to Area.area_ID
category_Name  VARCHAR
Query and DB connection stuff (our of order, but it's all there):

Code: Select all

<?php
qry_category_all="SELECT * FROM Category ORDER BY category_AreaID, category_Name";
$conn=mysql_connect();
$selected_db=mysql_select_db($db_name,$conn);
>?
Basically, I have a simple DB connection ($conn), and pull all the results from TABLE Category. Each row in TABLE Category has a column (category_AreaID) which links the category to the relevant Area.area_ID.
When I do the query, I order first by category_AreaID to group the rows, then by category_Name to make the list alphabetical.
When building the arrays, I loop through the results from qry_category_all, using $area_ID to create a separate array for each area.

I hope this clears it up a bit. If you need more help, just let me know.