PHP/MySQL Dyanmic Dropdown boxes on a single page

Posted on 2003-12-09
Last Modified: 2013-12-12

I am writing a PHP/MySQL web application for an auto parts website.

I wanted to have 4 dynamic dropdown boxes that will update its display when the OnChange event is triggered. Values in the list are fetched from a MySQL database. These 4 dropdown boxes are:

1)Car Make
2)Car Model
3)Parts Category
4)Car Parts

Car Model entries will depend on the Car Make values, and the Car Parts entries will depend on the Parts Category. Say... If i select BMW as the Car make, it will update the Car Model dropdown box with BMW car models. Same thing applies to the Parts Category, say.. if I select Body Parts in the Parts Category, it will update the Car Parts dropdown box with body parts.

On every change or display update, they should be able to preserve the selected values on other dropdown boxes.

Once satisfied with the selections, the form will now be submitted to a second script for further processing.

If possible, this script should be to ITSELF only and is NOT a multi page script.  

Please provide with a simple yet functional example of the code. Thank you very much and any help or thoughts are highly appreciated.

Question by:nyerky
  • 2

Accepted Solution

Katixa earned 75 total points
ID: 9904806

I've done something similar before. I just used some JavaScript functions.

This is, when you click on "Car Make", you call a function on JavaScript that automatically sets the location of the document to itself, but you add some parameters.


You can do this just getting the values from the dropdown boxes. If my english is too hard to understand, just lets see some code example (it's ASP, but I guess you get it). Be aware if copy-pasting this, I just edited a bit... I just post it to use it at help, is not the solution:

function fCargar(combo) {
  var parameters = "&id=<%=Request.QueryString("id")%>"
  parameters += "&fecha=" + document.form1.Fecha.value
  parameters += "&tipo=" + document.form1.Tipo.options[document.form1.Tipo.selectedIndex].value
  parameters += "&tipotraba=" + document.form1.TipoTrabajo.options[document.form1.TipoTrabajo.selectedIndex].value
  parameters += "&estado=" + document.form1.Estado.options[document.form1.Estado.selectedIndex].value
  parameters += "&objeto=" + document.form1.Objeto.value
  parameters += "&latarea=" + document.form1.latarea.options[document.form1.latarea.selectedIndex].value
  if (document.form1.Tarea) parameters += "&tarea=" + document.form1.Tarea.options[document.form1.Tarea.selectedIndex].value
  parameters += "&hcom=" + document.form1.Hcom.value
  parameters += "&hfin=" + document.form1.Hfin.value

  if (combo.selectedIndex==0) {
    if (document.form1.CT) {
      if (document.form1.OT)
        window.location.href="linea.asp?ct=" + document.form1.CT.options[document.form1.CT.selectedIndex].value + "&ot=" + document.form1.OT.options[document.form1.OT.selectedIndex].value + parameters;
        window.location.href="linea.asp?ct=" + document.form1.CT.options[document.form1.CT.selectedIndex].value + parameters;
      window.location.href="linea.asp?" + parameters.substring(1);
  else {
    window.location.href="linea.asp?" + parameters.substring(1);

If you check the "interesting" part, you will see that what I do is generate the string so I can then reload the page. In that PHP code you check the value of each parameter, and you then load each dropdown with the correcta value. Just add some "if this is the value, then write 'selected'" in the appropiate line, so the combo box gets the value selected.

If there is no make, you just don't process the others. You can add something like "Please select a make", and so on, depending on the value. When a make is selected, when the page gets reloaded, you select the Car Model table browsing only the models in that make. Now, when you click on this combo and select a value, you have to call a JavaScript function that generates again this string, so when the page gets reloaded you have the two combos with the selected values.

If there are more fields, you just pass all the values, like I do in the example above.

I hope you was able to understand this. If not, I will try to be more precise next time :)


Author Comment

ID: 9907929

Hello katixa,

Thank you for your comment. Can you provide me with a working example in PHP? Also, is the javascript cross-compatible with other browsers?


Assisted Solution

vadriewyn earned 75 total points
ID: 10130129
mmmmm.. i'll write you the code for car make & car model.. juz changing a few things shld suffice for the parts category and car parts cuz they work the same way..


$sql = "SELECT <car make field> FROM <tablename>";  // this will giv you all the car makes
$result = $db->query($sql);  // assuming you hav another class file for database query
// if you dont, juz run the SQL statement with your usual mysql_query string and save the return
// to a variable called $result

echo "<form name='make' action='index.php?carmake=$carmake' method='post'>";
echo "<select name='carmake'>";
for ($a = 0; $a < mysql_num_rows($result); $a++) {
 $array = mysql_fetch_row($result);
 echo "<option name='$array[0]' value='$array[0]'>".$array[0]."</option>";
echo "</select>";
echo "</form>";
// above chunk shld giv you yur 1st dropdown box wif all the car makes in it..

// assuming you have regglobals set to true..
if ($carmake) {
 $sql = "SELECT <car model field> FROM <car model table> WHERE <car make field> = '$carmake'";
$result = $db->query($sql);

echo "<form name='model' action='index.php?carmodel=$carmodel' method='post'>";
echo "<select name='carmodel'>";
for ($a = 0; $a < mysql_num_rows($result); $a++) {
 $array = mysql_fetch_row($result);
 echo "<option name='$array[0]' value='$array[0]'>".$array[0]."</option>";
echo "</select>";
echo "</form>";


the above code shld generate your 2 dropdown boxes accordingly.. the car parts and parts category shld work the same way.. only thing you'd have to switch are the sql statements..

hope this helps..

Expert Comment

ID: 10130276
oh btw i missed out somethin.. on each of the <select> you shld also add in the onchange method to submit the form.. e.g :

echo "<select name='carmodel' onchange='model.submit()'>"
// fyi it's onchange='<form name>.submit()'.. so whateva yur form is.. juz replace accordingly..

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
MySQL Sub-Select Query Returning Duplicate Result 7 45
PHP Query return divisible by 3 3 26
What is wrong with this PDO Delete Query? 2 17
if (is_singular not working 5 18
This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question