huanix

chown -R huanix /

huanix header image 2

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

December 25th, 2006 · 1 Comment · 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

Tags:

One Comment 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!

Leave a Comment