A web page developer creates a drop-down dist box (or combo-box) on a web page by using the select tag. This normally static, but can be made dynamic by using VBScript.
A web page programmer can create drop-down list boxes (also know as combo-boxes) by using the HTML select tag - with this they can create static drop-down list boxes from which the web page user can choose items. However, if the web page user has the Internet Explorer web browser then the developer can use VBScript to build dynamic drop-down list boxes.
A Static Drop-Down List Box
A static drop-down list box can be created with just a few lines of HTML code:
<select>
<option value=1>This is the first choice</option>
<option value=2>This is the second</option>
</select>
This type of drop-down list box is suitable for sending data to a server (for example) for further processing, however by adding VBScript the web page programmer can change the contents of the drop-down list box - for example changing the contents of one according to the user selection from another.
A Dynamic Drop-Down List Box
The first step is for the two drop-down list boxes to be defined with HTML:
<select id=sel_planet>
</select>
<select id=sel_moon>
</select>
Next the code is needed to load the data - and, as always, it's better to split the code into subroutines so that it can be re-used as required. The first subroutine is used to add an option to the select box:
<script language=vbscript>
option explicit
sub add_option (select_id, value, text)
dim opt : set opt = document.createelement("option")
opt.value = value
opt.text = text
select_id.add opt
set opt = nothing
end sub
The next subroutine populates a select box with the contents of an array:
sub load_combo (select_id, option_array)
dim i: for i = 0 to ubound(option_array)
add_option select_id, i, option_array(i)
next
end sub
And then a final subroutine clears the contents of a drop-down list box:
sub clear_combo (select_id)
select_id.options.length = 0
end sub
With the subroutines in place an array is required - this will be used to populate the first of the select boxes:
dim planets : planets = array ("Mercury", "Venus", "Earth", "Mars", _
"Jupiter", "Saturn", "Uranus", "Neptune", "Pluto")
load_combo sel_planet, planets
Populating a Drop-Down List Box According the Selection of Another
The second selection box is loaded from an array, but the array will change according to the selection from the first combo-box, and so a suitable set of arrays is:
dim jupiter_moons : jupiter_moons = split ("Io, Europa, Ganymede," _
& "Callisto, Amalthea, Himalia, Elara, Pasiphae, Sinope, Lysithea," _
& " Carme, Ananke, Leda, Metis, Adrastea, Thebe, Callirrhoe, Themisto," _
& "Kalyke, Iocaste, Erinome, Harpalyke, Isonoe, Praxidike, Megaclite," _
& "Taygete, Chaldene, Autonoe, Thyone, Hermippe, Eurydome, Sponde," _
& "Pasithee, Euanthe, Kale, Orthosie, Euporie, Aitne", ",")
dim saturn_moons : saturn_moons = split ("Titan, Rhea, Iapetus," _
& "Dione, Tethys, Enceladus, Mimas, Hyperion, Prometheus, Pandora," _
& "Phoebe, Janus, Epimetheus, Helene, Telesto, Calypso, Atlas," _
& "Pan, Ymir, Paaliaq, Siarnaq, Tarvos, Kiviuq, Ijiraq, Thrym, Skadi," _
& "Mundilfari, Erriapo, Albiorix, Suttung", ",")
dim uranus_moons : uranus_moons = split ("Cordelia, Ophelia, Bianca," _
& "Cressida, Desdemona, Juliet, Portia, Rosalind, Belinda, Puck," _
& "Miranda, Ariel, Umbriel, Titania, Oberon, Caliban, Sycorax," _
& "Prospero, Setebos, Stephano, Trinculo", ",")
dim neptune_moons : neptune_moons = split ("Triton, Nereid, Naiad," _
& "Thalassa, Despina, Galatea, Larissa, Proteus", ",")
One final subroutine is required - this will fire whenever the user changes the selection in the first drop-down list boxbox:
sub sel_planet_onchange
clear_combo sel_moon
select case sel_planet.value
case 0 'Mercury
Case 1 'Venus
Case 2 'Earth
add_option sel_moon, 0, "Moon"
Case 3 'Mars
add_option sel_moon, 0, "Phobos"
add_option sel_moon, 1, "Deimos"
Case 4 'Jupiter
load_combo sel_moon, jupiter_moons
Case 5 'Saturn
load_combo sel_moon, saturn_moons
Case 6 'Uranus
load_combo sel_moon, uranus_moons
Case 7 'Neptune
load_combo sel_moon, neptune_moons
Case 8 'Pluto
add_option sel_moon, 0, "Charon"
end select
end sub
</script>
If the this is saved into a .html file then the user will see two drop-down list boxes: one with a list of planets; the second with the moons for each planet - the contents of the second combo-box will change according the the selection that the user makes in the first.
Further Reading
To see how the same functionality is achieved with Javascript read Creating Dynamic Combo-boxes with Javascript
Mark Alexander Bain
- Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly
...
