huanix

chown -R huanix /

huanix header image 2

Dynamic Dependent Drop Down Select Forms using PHP, MySQL, and JavaScript

December 25th, 2006 · 4 Comments · JavaScript, MySQL, php

I knew it was possible to create a dynamic dependent drop down form using PHP, MySQL, and JavaScript, but I had never had an excuse to use one before my Christmas-break project. I have always thought the forms were neat – like when you select a Country and the next drop-down automagically displays the states from that country. These are also referred to as drill down menus.
It’s “family time”, so I’m building a basic inventory control system for the school I work at, and one of the basic goals is that users would select their “hardware type” (tv, pc computer, mac computer, laptop, etc.) and subsequently select the model # from a list rather than entering it manually. In addition, an administrator has the option to add both hardware types and models to the list at his/her discretion.

All of these things require a dynamic dependent drop down list. I found several resources for completing this task, and after several hours of work, I got it to work using what I believe is the simplest method. You may be far more skilled than I am, and this may be a breeze for you, but I have very little knowledge of JavaScript, so I relied on PHP as much as possible.
Many folks use DreamWeaver to create these menus – I am challenge-oriented, so all of my techniques refer to hand-coded methods.

The first and most highly regarded source for creating dependent dynamic drop downs is the Matt Kruse method, Matt has written an extensive JavaScript library that simplifies the entire dynamic dropdown task.. and it does, but because of my unfamiliarity with JavaScript, I had trouble adding the database through PHP.
I was initially stoked about an AJAX method, and I found one at webmonkey, but I am a novice to AJAX, and I couldn’t make it happen.
I also tried codefixer, but after some struggling, I decided it wasn’t the method for me.

All of this to say, I did eventually find the magic, and it was relatively easy to use (if you add a trick). The source is at wrox, and the trick I used to make it work was to create a simulated database using their structure, and slowly migrate it over to my setup. It worked really well, used a minimum of code, and does the job perfectly!

Here is my cleaned up and working version of the script:http://www.huanix.com/files/dependent_select/dependent_select.php

Incoming search terms:

  • php dependent drop down list
  • dependent dropdown in php
  • dependent drop down list in php
  • php dependent drop down
  • dependent drop down php
  • dependent drop down list php
  • dependent dropdown php
  • php dependent dropdown
  • dependent dropdowns php
  • php mysql dynamic dropdown

Tags:

4 Comments so far ↓

  • Kelly

    Wow, exactly what I’ve been looking for! Like you, I avoid Javascript at all costs! It just isn’t for me. I love PHP but I don’t like migrating MySQL into it too often but, alas, that’s par for the course. Anyway, I think that I can use your script, and understand it, too!

    Thanks a whole lot for putting this out here!

  • iaqsuk

    Hi, I’m trying to do something similar, but different. I’m trying to add to a existing dropdown from a textarea with a add button then it updates on the dropdown list?

  • ernesto angeles jr

    hi guys, this is fine if the dependent table per layer of dependency is only one.

    how can you make it happen that one selection of the dropdown affects 2 or 3 tables dropdown at the same time?

    say, if you select DROPDOWN1, Dropdown 2 and Dropdown changes at the same time.

  • Fahim

    I was following your example for making a drop down list. Each of your database seem to be containing integer unique identifier. My case is little different and the table does not contain integer identifier. How can i modify the option tag in while loop so that the drop down works fine.
    My code is not selecting the genomeVer value in the drop down list.

    My code is given as under.

    function autoSubmit()
    {
    var formObject = document.forms['theForm'];
    formObject.submit();
    }

    Select Organism
    <option value= "1" >human
    <option value= "2" >mouse
    <option value= "3" >rat

    select GenomeVersion

    <?php
    while($row = mysql_fetch_array($result))
    {
    // echo ("$row[genomeVer]“);
    echo “” . $row['genomeVer'] . “”;
    }

    ?>

    Thanks
    Fahim

Leave a Comment