Unobtrusive Dynamic Select Boxes | JavaScriptSource

Unobtrusive Dynamic Select Boxes

Bobby Sluis May 23, 2007


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.


Source Code

Paste this source code into the designated areas.

External file

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


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


Paste this code into the BODY section of your HTML document

Leave a Response


I tested that code. It's not working on Internet Explorer 9 !

Barny Nov 23, 2012

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=";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