Dropdown Updates Another Dropdown

When a selection is made in one dropdown, the items in another dropdown can change accordingly.

The example in this article was developed for a catering website.

The website has a dropdown list for catering truck arrival times. When a time is selected from the list, a second dropdown is populated with food serving times.

The dropdowns can be modified for other time-selection purposes; a meeting request, for example, with an indication of how long the meeting might last.

The reason for the two lists for this particular project is that some companies' event locations have time consuming check-in procedures or require the use of slow freight elevators. The second list lets the catering company's customer select a serving time up to 45 minutes after truck arrival time.

Dropdown Populating a Dropdown Example

Below is an example of the catering website dropdowns. Following that, I'll talk about how it works, how to implement it, and how to modify it to fit your own time-selection needs.

Arrival Time:

Serving Time:

When the Arrival Time dropdown is changed, the Serving Time dropdown is updated accordingly.

How It Works

The source code is in the next section. Here, I'll just do a narrative description.

There are three dropdowns. Only two are visible at one time.

• The Arrival Time dropdown.

• The Serving Time dropdown you see when the page first loads. This is a static dropdown.

• The Serving Time dropdown you see after selecting an item from the Arrival Time dropdown. This is a dynamic dropdown.

The static dropdown list never changes, it's just replaced with the dynamic one when an Arrival Time is selected.

When an Arrival Time is selected the first time:

1. The static Serving Time dropdown is replaced with the dynamic dropdown.

2. The dynamic Serving Time dropdown is populated with three selection times, one 15 minutes after the Arrival Time selection, another 30 minutes after, and the third selection time is 45 minutes after the Arrival Time selection.

Subsequent selection of different Arrival Times simply updates the dynamic Serving Time dropdown.

If the Arrival Time dropdown selection is re-selected at the first, "Select arrival time," item, the Serving Time dropdown is reset to the way it would be when the page first loads.

Implementation

There are three parts to implementation, the Arrival Time dropdown, the Serving Time dropdowns, and the JavaScript.

Paste them into your test page as indicated. They should function like the above example.

The source code has colored text in a few places. After the copy-and-paste source code boxes, there's information referring to those colored areas.

Here's the source code for the Arrival Time dropdown. Paste it as is into your test page wherever you want the dropdown to appear.

<select id="arrival-time-list" onchange="ChangeSecondList(this.options[this.selectedIndex].value)" name="arrival">
<option value="">Select arrival time</option>
<option value="8:00am">8:00am</option>
<option value="8:15am">8:15am</option>
<option value="8:30am">8:30am</option>
<option value="8:45am">8:45am</option>
<option value="9:00am">9:00am</option>
<option value="9:15am">9:15am</option>
<option value="9:30am">9:30am</option>
<option value="9:45am">9:45am</option>
<option value="10:00am">10:00am</option>
<option value="10:15am">10:15am</option>
<option value="10:30am">10:30am</option>
<option value="10:45am">10:45am</option>
<option value="11:00am">11:00am</option>
<option value="11:15am">11:15am</option>
<option value="11:30am">11:30am</option>
<option value="11:45am">11:45am</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm">12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="1:00pm">1:00pm</option>
<option value="1:15pm">1:15pm</option>
<option value="1:30pm">1:30pm</option>
<option value="1:45pm">1:45pm</option>
<option value="2:00am">2:00am</option>
<option value="2:15am">2:15am</option>
<option value="2:30pm">2:30pm</option>
<option value="2:45pm">2:45pm</option>
<option value="3:00pm">3:00pm</option>
<option value="3:15pm">3:15pm</option>
<option value="3:30pm">3:30pm</option>
<option value="3:45pm">3:45pm</option>
<option value="4:00pm">4:00pm</option>
<option value="4:15pm">4:15pm</option>
<option value="4:30pm">4:30pm</option>
<option value="4:45pm">4:45pm</option>
<option value="5:00pm">5:00pm</option>
<option value="5:15pm">5:15pm</option>
<option value="5:30pm">5:30pm</option>
<option value="5:45pm">5:45pm</option>
<option value="6:00pm">6:00pm</option>
<option value="6:15pm">6:15pm</option>
<option value="6:30pm">6:30pm</option>
<option value="6:45pm">6:45pm</option>
<option value="7:00pm">7:00pm</option>
</select>

And here is the source code for the two Serving Time dropdowns, the static dropdown and the dynamic dropdown. They're both in their own div. Only one will be published at any one time. Paste the divs into your source code where you want the Serving Time dropdown to be published.

<div id="static-list-div" style="display:block;">
<select>
<option>&#8679; Select an arrival time</option>
<option>&#8679; from the above dropdown.</option>
</select>
</div>

<div id="dynamic-list-div" style="display:none;">
<select id="dynamic-list" name="serving">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>

And third, here's the JavaScript. Paste it into your source code anywhere below the dropdowns. Way down at the end of the BODY area would be fine.

<script type="text/javascript">
function ChangeSecondList(value)
{
   if( value.length )
   {
      document.getElementById("static-list-div").style.display = "none";
      document.getElementById("dynamic-list-div").style.display = "block";
      var dropid = document.getElementById("dynamic-list");
      var ta = value.split(":");
      var hour = parseInt(ta[0]);
      var minute = parseInt(ta[1].replace(/\D/g,""));
      var apm = ta[1].replace(/\d/g,"");
      for( var i=0; i<3; i++ )
      {
         minute += 15;
         if( minute > 59 )
         {
            hour++;
            minute -= 60;
            if( hour > 11 )
            {
               apm = apm.replace(/a/,'p');
               apm = apm.replace(/A/,'P');
            }
         }
         if( hour > 12 ) { hour -= 12; }
         if( minute < 10 ) { minute = "0"+minute; }
         var valuetext = hour + ":" + minute + apm;
         dropid.options[i].text = valuetext;
         dropid.options[i].value = valuetext;
         minute = parseInt(minute);
      }
      dropid.options[0].selected = true;
   }
   else
   {
      document.getElementById("static-list-div").style.display = "block";
      document.getElementById("dynamic-list-div").style.display = "none";
   }
}

ChangeSecondList(document.getElementById("arrival-time-list").options[document.getElementById("arrival-time-list").selectedIndex].value);
</script>

Four of the seven colored areas in the above source code boxes are select or div id values. Each has one or two corresponding colored areas in the JavaScript. The other three colored areas occur only in the JavaScript and are referred to in the Modification section further below.

The Arrival Time dropdown — You'll see the select field's id value arrival-time-list is in the JavaScript at two places, both within line 42.

The static Serving Time dropdown — The static dropdown is in a div with id value static-list-div. This id value is also in the JavaScript at two places, within line 6 and within line 37.

The dynamic Serving Time dropdown — The dynamic dropdown section has two id values. One is for the div containing the dropdown and the other is for the select field itself.

1. The div's id value is dynamic-list-div. The id value is in two places in the JavaScript, within line 7 and within line 38.

2. The select field's id value is dynamic-list. The id value is in the JavaScript at only one place, within line 8.

The id values in the HTML sections are repeated in the JavaScript so the JavaScript can access the sections. If you change any of the id values, the corresponding JavaScript sections need to be changed as well.

The purple-colored, the red-colored, and the gray-colored JavaScript code are referred to in the Modification section below.

Modification

The project is versatile. It's likely that modifications can be made for your time selection and duration selection requirements.

For the previously mentioned meeting request example, the arrival time dropdown would become the meeting request time dropdown and the food serving time dropdown would become the meeting length.

Any one or all of these 4 modifications can be made:

1. The times listed in the Arrival Time dropdown: the clock times, the format of the am/pm designation, and/or using 24-hour clock times.

2. The content of the static Serving Time dropdown.

3. The number of selectable times in the dynamic Serving Time dropdown.

4. The time increments in the dynamic Serving Time dropdown.

Here are the modification instructions:

1. Arrival Time dropdown (select field id value arrival-time-list)

   This is a list of times that may be selected. Change it as required.

   The "am" or "pm" can be specified with any of these formats:

   8:30am
   8:30AM
   8:30 am
   8:30 AM
   

   ⇒ Special instructions for 24-hour clock times:

   ⇒ (a) Specify the times in the dropdown without the "am" or "pm".

   ⇒ (b) In the JavaScript, replace the gray-colored line 26:

   if( hour > 12 ) { hour -= 12; }
   

   with this:

   apm = "";
   

   That one change in the JavaScript will remove both the after midday hour number adjustment code and the am/pm time appendant value when the dynamic Serving Time dropdown is updated.

2. Static Serving Time dropdown (dropdown in div id value static-list-div)

   This dropdown is replaced when an Arrival Time is selected. It may be blank or it may contain instructions to the user.

3. Dynamic Serving Time dropdown; number of selectable times (select field id value dynamic-list)

   The dropdown has 3 blank options and option values, which may be changed. The JavaScript fills in the blank items when an Arrival Time is selected.

   If you've changed the number of blank options in the dropdown, then also change the purple-colored JavaScript code. At line 13, change the number 3 in this line:

   for( var i=0; i<3; i++ )
   

   to the number of blank options the dropdown has.

4. The time increments in the dynamic Serving Time dropdown.

   This change is in the red-colored JavaScript code. At line 15, change the number 15 in this line:

   minute += 15;
   

   to whatever increment you want the Serving Time dropdown to have when the JavaScript fills it in.

If you make modifications, have this page handy for reference and so you can copy the original code in case you introduce a bug during the modification.

As you can see, the time selection dropdown that populates a second dropdown is quite versatile.

This example, developed for a catering company, can easily be adapted for other situations where both a start time and a time length need to be selected.

(This article first appeared in Possibilities ezine.)

Will Bontrager