PHP and MySQL Code

Start typing to search for PHP and MySQL Code Snippets and Articles Search

Submit a code Example / Snippet Join us on FaceBook
Submit a code Example / Snippet Submit Your Code
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Resources
Web Development Content
PHP Editor
PHP Jobs
Vision.To Design
Ajax Tutorials
PHP Programming Help
PHP/MySQL Programming
Webmaster Resources
Webmaster Forum
XML meta language
website builder

Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
Title : Unobtrusive Cascading Dropdown
Categories : Java Script, HTML Click here to Update Your Picture
Ioannis Cherouvim
Date : Sep 29th 2006
Grade : 4 of 5 (graded 6 times)
Viewed : 33812
File : No file for this code example.
Images : No Images for this code example.
Search : More code by Ioannis Cherouvim
Action : Grade This Code Example
Tools : My Examples List

Submit your own code examples  Submit your own code examples 

Script: Cascading Dropdowns
Author: Ioannis Cherouvim
Date : 2006-09-15
Demo :

An unobtrusive javascript function which binds dropdowns together in order to apply cascading behaviour. Child (cascaded) dropdown has a class pointing to the value of the father dropdown.

If javascript is not enabled, your application will run. The user will just get to see all the possible child dropdown options, which is better than seeing nothing (as in 100% javascript based cascading dropdowns).

Multiple dropdowns can be linked together.

--- HTML ---
<label for="categories">categories: </label>
<select name="categories" id="categories">
    <option value="1">people</option>
    <option value="2">food</option>
    <option value="3">computer parts</option>
    <option value="4">other</option>

<label for="items">items: </label>
<select name="items" id="items">
    <option class="1" value="0">john</option>
    <option class="1" value="1">george</option>
    <option class="1" value="2">maria</option>
    <option class="1" value="3">kostas</option>

    <option class="1" value="4">petros</option>
    <option class="1" value="5">aleksis</option>
    <option class="1" value="6">nikos</option>
    <option class="1" value="7">niki</option>
    <option class="1" value="8">haris</option>
    <option class="2" value="9">banana</option>

    <option class="2" value="10">milo</option>
    <option class="2" value="11">souvlaki</option>
    <option class="2" value="12">pagoto</option>
    <option class="2" value="13">beer</option>
    <option class="2" value="14">water</option>
    <option class="2" value="15">cocacola</option>

    <option class="2" value="16">patates</option>
    <option class="3" value="17">othoni</option>
    <option class="3" value="18">pliktrologio</option>
    <option class="3" value="19">mouse</option>
    <option class="3" value="20">HD</option>
    <option class="3" value="21">floppy</option>

    <option class="3" value="22">modem</option>
    <option class="3" value="23">router</option>
    <option class="3" value="24">TFT</option>
    <option class="4" value="25">foo</option>
    <option class="4" value="26">bar</option>

----- JAVASCRIPT -----
//Applies cascading behavior for the specified dropdowns
function applyCascadingDropdown(sourceId, targetId) {
    var source = document.getElementById(sourceId);
    var target = document.getElementById(targetId);
    if (source && target) {
        source.onchange = function() {
            displayOptionItemsByClass(target, source.value);
        displayOptionItemsByClass(target, source.value);

//Displays a subset of a dropdown's options
function displayOptionItemsByClass(selectElement, className) {
    if (!selectElement.backup) {
        selectElement.backup = selectElement.cloneNode(true);
    var options = selectElement.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
    var options = selectElement.backup.getElementsByTagName("option");
    for(var i=0, length=options.length; i<length; i++) {
        if (options[i].className==className)

//Binds dropdowns
function applyCascadingDropdowns() {
    applyCascadingDropdown("categories", "items");
    //We could even bind items to another dropdown
    //applyCascadingDropdown("items", "foo");

//execute when the page is ready

showing Help (assistance) to the user while filling html forms.
Categories : HTML, Java Script, Form Processing
Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time
Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides
Listbox to Listbox Jquery
Categories : Java Script, HTML, CSS, Scripts, Web Applications
Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General
complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password. improved security using time functions to initialize random number generator.
Categories : Java Script, HTML, Security, Authentication, Strings
Check if Javascript is Enabled or Disabled - Works in all Browsers
Categories : Java Script, HTML, Web Browsers
Javascript linked dropdowns
Categories : Java Script, HTML, Classes and Objects
Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML
Bouncing Marquee at Status Bar
Categories : Java Script, HTML, Browsers
Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML
Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script
Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security
Javascript Background Scroller
Categories : Java Script, CSS, HTML
Clock at Status Bar
Categories : Java Script, HTML, Date Time