Unobtrusive Dynamic Select Boxes | JavaScriptSource

Unobtrusive Dynamic Select Boxes

Bobby Sluis May 23, 2007

General

Use this script to produce select boxes that relate to one another. Choose an option in the first box and the script will change the available choices in the second box to match your selection. Easy to use, with comments.


Notes

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: unobtrusiveDSBoxes.js


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(6 comments)

The previous comment I send is not correct!!![br /]This code works perfectly.[br /]Thanks!!

tika Jan 23, 2008

Excellent idea, Jono! Works great!

Lee Oct 3, 2007

1. Set your options for the first box[br /]2. For the second box, where you would normally have the <select id="pda-type"> CHANGE IT TO THIS:[br /]<select id="pda=type" onchange="window.open(this.options&#91;this.selectedIndex&#93;.value,'_top')">[br /][br /]3. For each of your options in the second box:[br /]<option value="YOUR URL">OPTION NAME</option>[br /][br /]Then when the user selects their second option it will automatically navigate to the value you gave.

Jono Aug 31, 2007

I looked for hours trying to find a script that would help condense my drop drop boxes. This script is a dream come true! It works equally well on Explorer, Nescape and Mozilla. Well done![br /][br /]Cindee

Cindee Aug 24, 2007

I looked at a lot of js script for dependent drop downs, but they were all too complicated to understand. Thanks for this script and for keeping it simple. Using the class attibute was a great idea![br /]-- Larry

Larry Aug 2, 2007