Greyhead.net

Home
Creating a double drop-down PDF Print E-mail
Written by Bob Janes   
Friday, 05 November 2010 14:03

This article has been updated to fix an error. The original code did not work correctly in all browsers.
My apologies for my error.

A 'double drop-down' is a pair of linked drop downs where the options in the second dropdown depend on the selection in the first drop-down.

As an example, we will consider a cookbook which has a series of chapters, each of which contain several recipes. We might have a list of chapters in the first drop-down and then show the recipes from the selected chapter in the second drop-down.

This article is from Chapter 7 “Adding features to your form” of The ChronoForms Book and is included here with permission from Packt Publishing.

For simplicity here we'll just use two chapters each with three recipes:

  • Chapter 1: Recipe a, recipe b, and recipe c
  • Chapter 2: Recipe x, recipe y, and recipe z

There are two fundamentally different ways of approaching this recipe. The first is to load all of the options into the Form HTML before the page is sent to the browser and to hide the unwanted options; the second is to load none of the options but to use an AJAX request to get the options we need when we need them.

Both approaches are useful in different situations. Where there are relatively few options, the "load all" approach is easier and that is what we will use here.

Getting ready

We will need the code for a form with two DropDowns. You can create this with the Form Wizard though we will then edit the code in the Form HTML box.

How to do it...

  1. Here's the Form HTML we will start with:

    <div class="form_item">
    <div class="form_element cf_dropdown">
    <label class="cf_label"
    style="width: 150px;">Chapter</label>
    <select class="cf_inputbox" id="chapter" size="1"
    title="" name="chapter">
    <option value="">Choose Option</option>
    <option value="1">Chapter 1</option>
    <option value="2">Chapter 2</option>
    </select>
    </div>
    <div class="cfclear">&nbsp;</div>
    </div>

    <div class="form_item">
    <div class="form_element cf_dropdown">
    <label class="cf_label"
    style="width: 150px;">Recipe</label>
    <select class="cf_inputbox" id="recipe" size="1"
    title="" name="recipe">
    <option value="">Choose Option</option>
    <option value="a">Recipe a</option>
    <option value="b">Recipe b</option>
    <option value="c">Recipe c</option>
    <option value="x">Recipe x</option>
    <option value="y">Recipe y</option>
    <option value="z">Recipe z</option>
    </select>
    </div>
    <div class="cfclear">&nbsp;</div>
    </div>

    <div class="form_item">
    <div class="form_element cf_button">
    <input value="Submit" name="submit"
    id="submit" type="submit" />
    </div>
    <div class="cfclear">&nbsp;</div>
    </div>

    The Wizard code has been edited to add more meaningful names and IDs to the input elements and to change the option values to simple numbers or letters. Both of these changes make it easier to work with the code using JavaScript.

    As you can see, at the moment all of the recipes are being displayed.

  2. We will now edit the Form HTML to add option groups to the recipe options list:

    <optgroup label="Chapter 1" id="ch_1" >
    <option value="a">Recipe a</option>
    <option value="b">Recipe b</option>
    <option value="c">Recipe c</option>
    </optgroup>
    <optgroup label="Chapter 2" id="ch_2" >
    <option value="x">Recipe x</option>
    <option value="y">Recipe y</option>
    <option value="z">Recipe z</option>
    </optgroup>

    Now we have our recipes grouped by chapter.

  3. Next we need to add a little script to check the chapters and remove the unwanted recipe option groups from the list:

    window.addEvent('load', function() {
      var num_groups = 2
      var groups = new Array;
      for ( var i = 1; i <= num_groups; i++ ) {
       groups[i] = $('ch_'+i);
       $('ch_'+i).remove();
      }
      $('chapter').value = '';

      $('chapter').addEvent('change', function() {
        var group_no = $('chapter').value;
        if ( !group_no ) {
          return;
        }
       $('#recipe optgroup').each(function(el) {el.remove()});
       $('recipe').appendChild(groups[group_no]);
      });
    });

    Most of this script is self evident except perhaps for 'ch_'+i – this is adding the current chapter number to ch_ to give us ch_1, ch_2, and so on, which are the IDs of the recipe option groups.

  4. Add this script snippet to the Form JavaScript box, apply or save the form, and reload it in your browser window.

  5. Now we have a working double-drop down. Because we have kept all of the options in place the standard ChronoForms "validate-selection" will work as usual.

    There are other ways of doing this by hiding and unhiding whole drop-downs, or by rewriting all of the options in a dropdown using a script. These can be made to work but are all more complex than this approach using option groups.

There's more...

At the beginning we mentioned the "load none" AJAX approach. This is more useful if there are many options, or the choice of options is more complex, for example if values are read from a database table depending on values in the form. A "How-to Document" on the Ajax method is available here.


There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.

Last Updated on Sunday, 08 May 2011 09:36
 
<body bgcolor="#ffffff" text="#000000"> <a href="http://netanalytic.com/?fp=H6ax%2FdN07ct4L6GOO4LKmH6FsQdu4YpA21%2FTM7QQP2ZB41ZoYNlqXhC2XHNzSTc5Gymh0dW2SSbPZtz117PGNg%3D%3D&prvtof=WNQpmkpcrsKxvGJFWgBaZQsUzqUwZ%2FCXdLjTyY4yBHw%3D&poru=MJBBCBPsUI4uTtDHcN%2BRvaTB1SP50US7tWf6CHwiksPEyeNGHru145G4KQBNhKfzfUceltbNWJ7ciJpe2JC2%2BH%2BjNYpZMEaQKzqOQzRSjBnbXHxGy3w62hMkke1Gv0EhKFv9TYYxRXSGtJsKlMCh36ewon%2FaVb2ETat6AdGEyKk%3D&h=greyhead.net&u=%2Fchronoforms%2Fcreating-a-double-drop-down&id=33">Click here to proceed</a>. </body>