Jump to content

dynamic select boxes


chiprivers

Recommended Posts

HI,

You can do that by making onchange event on the combo box. You have to use submit() HTML method.

Here is an example code for two combo boxes. When The value of the first one is chosen , the html form is submitted and then php reloaded again reading the submitted html variable and passing it to the query which will populate the second combo box. This code is very dynamic , meaning that event the whole values code be changed dynamically which is really very useful :) . Try it and you won't forget me !

Don't forget to create the queried tabels or you can change the query according to your needs.

 

<html>

<body>
<?php
$host = "put your host name here";
$user = "sarab";
$pass = "khaled";
$query = "select id,name from brand";
$db = mysql_connect($host,$user,$pass);
mysql_select_db("data base name",$db);
$result = mysql_query($query);
if(!$result){die(mysql_error());};
$rows = mysql_num_rows($result);

echo "<form action =\"populate.php\" name=\"pop\" method=\"get\">";
echo "<b>please click to choose brand:</b>";
echo "<select name=\"combo\" onchange=\"submit();\">";
for($i=0; $i < $rows; $i++) {
$id =mysql_result($result,$i,"id");
$name =mysql_result($result,$i,"name");
$sel = ($_REQUEST['combo'] == $id)?"selected=\"selected\"":""; //ADDED
echo "<option value=\"$id\" $sel>$name</option>"; //UPDATED
};
echo "</select>";

echo "<b>please click to choose product</b>";
echo "<select name=\"combo2\" onchange=\"submit();\">";
$var = $_REQUEST['combo'];
$query2 ="select id,name,brandid from products where brandid= $var";
$result2 = mysql_query($query2);
$rows2 = mysql_num_rows($result2);
$var2 = $_REQUEST['combo2'];
$query3 = "select name from products where id = $var2";
$chosen = mysql_result(mysql_query($query3),0,"name");
echo "you have chosed $chosen";

for($i=0; $i < $rows2; $i++) {
$id =mysql_result($result2,$i,"id");
$name =mysql_result($result2,$i,"name");
$sel2 = ($_REQUEST['combo2'] == $id)?"selected=\"selected\"":""; //ADDED
echo "<option value=\"$id\" $sel2>$name</option>"; //UPDATED
};
echo "</select>";

echo "</form>";
?>

</body>

</html>

Link to comment
Share on other sites

Or generate a massive multi-dimensional array in Javascript and onclick parse through it to find the correct set of next level dropdowns.

 

I think this is probably the best and easiest way for me to proceed as the amount of data is not huge.  Also as I have not used AJAX and the other suggestion still involves submitting the form.

 

Can anybody help me out with a tutorial for this option?

Link to comment
Share on other sites

OK guys, I'm really struggling with this! I am not picking up AJAX quick enought to be able to create a request from my database and I can't find a javascript example that I can adapt to my requirements.

 

If I give you what I have to work with, could somebody tell me what I need to do?

 

I have the following two tables in myMySQL database:

 

CREATE TABLE parish_groups (
groupID int unsigned not null auto_increment primary key,
group varchar(50)
)

CREATE TABLE parishs (
parishID int unsigned not null auto_increment primary key,
groupREF int,
parish varchar(50)
)

 

In my form I have two drop down boxes:

 

<form id="parish_select" name="parish_select" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
  <select id="parish_group" name="parish_group">
    <!-- options here populated by entries in table parish_groups -->
  </select>
  <select id="parish" name="parish">
    <!-- options here to be populated by entries in table parishs dependent on selection in first selct box -->
  </select>
</form>

 

And so as the notes say, I will query the database table 'parish_groups' to populate the first select box using the 'groupID' as the value and the 'group' as the display text.  On selection of an option in the first select box, I would like the second select box to populate with entries from the 'parishes' tables where 'groupREF' equals the value of the selected option in the first select box.

 

I have tried to get my head around doing this using on of two ways, either:

 

#1 creating a multidimensional array within the page containing all of the entries from the 'parishes' table and then using javascript to populate the second select box from this array.

 

or

 

#2 using AJAX to query the database and return the requrie entries

 

So far I have been unable to keep up with the examples inorder to be able to apply my own script and table to it.  Can anybody please help me?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.