{"id":64343,"date":"2007-07-31T01:04:00","date_gmt":"2007-07-31T01:04:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/07\/31\/how-can-i-dynamically-link-two-drop-down-lists\/"},"modified":"2007-07-31T01:04:00","modified_gmt":"2007-07-31T01:04:00","slug":"how-can-i-dynamically-link-two-drop-down-lists","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-dynamically-link-two-drop-down-lists\/","title":{"rendered":"How Can I Dynamically Link Two Drop-Down Lists?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! How can I configure a pair of dropdown lists in an HTA so that, when I change the selection in the first list, the options available in the second list also change?

— PC <\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, PC. Before we get going today, we\u2019d like to make it clear that the Scripting Guy who writes this column isn\u2019t the least bit tired. Sure, he and the Scripting Son went to the midnight showing of The Simpsons Movie <\/I>last night, which meant that the Scripting Guy who writes this column didn\u2019t get to bed until 2:15 AM, then had to get up less than four hours later in order to get to work and write this column. But why would that make him tired? Sure, staying up all night might make some old<\/I> guy tired. But the Scripting Guy who writes this column? He\u2019s not the least bit \u2026 um, what was that word again? Right. Tired. He\u2019s not the least bit tired.<\/P>\n

Not the bit least.<\/P>\n

Um, not the least bit.<\/P>\n

At any rate, seeing as how the Scripting Guy who writes this column is bright-eyed and bushy-tailed, and seeing as how he did<\/I> remember to put on pants this morning (hold on a second \u2026 yes, he did), let\u2019s see what we can do to address PC\u2019s question. Which was \u2026 it\u2019s on the tip of our tongue \u2026 oh, right. PC has an HTML Application (more familiarly known as an HTA) that features a pair of drop-down lists. When he makes a selection in the first list, he\u2019d like the options in the second list to dynamically change in response to that choice. How can he do that? We have absolutely no idea. Good night; see you in the morning.<\/P>\n

Wait a second; don\u2019t go. It turns out that we have at least one<\/I> idea as to how he can do this:<\/P>

<Script Language=”VBScript”>\n    Sub RunScript\n        For Each objOption in DynamicOptions.Options\n            objOption.RemoveNode\n        Next <\/p>\n
        If PickCategory.Value = “Characters” Then\n            arrValues = Array(“A”, “B”, “C”, “D”, “E”)\n        End If<\/p>\n
        If PickCategory.Value = “Numbers” Then\n            arrValues = Array(“1”, “2”, “3”, “4”, “5”)\n        End If<\/p>\n
        For Each strValue in arrValues\n            Set objOption = Document.createElement(“OPTION”)\n            objOption.Text = strValue\n            objOption.Value = strValue  \n            DynamicOptions.Add(objOption)\n        Next     \n    End Sub\n<\/Script><\/p>\n
<select size=”1″ name=”PickCategory” style=”width:100px” onChange=”RunScript”>\n    <option value=”Characters”>Characters<\/option>\n    <option value=”Numbers”>Numbers<\/option>\n<\/select><\/p>\n
<P><\/p>\n
<select size=”1″ name=”DynamicOptions” style=”width:100px”>\n    <option value=”A”>A<\/option>\n    <option value=”B”>B<\/option>\n    <option value=”C”>C<\/option>\n    <option value=”D”>D<\/option>\n    <option value=”E”>E<\/option>\n<\/select>\n<\/PRE>\n
As you can see, there\u2019s really not too much to this particular HTA. (If you aren\u2019t sure what an HTA even is<\/I> then you might want to take a peek at our HTA Developers Center<\/B><\/A>.) For example, the body of our HTA contains only a pair of drop-down lists. The first drop-down list is named PickCategory and includes just two options:<\/P>\n\n\n\n\n
\u2022<\/TD>\n\n
Characters (the default value)<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
Numbers<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
The premise here is simple: the user is going to select one of these two options. If the user selects Characters<\/B> then, on-the-fly, we\u2019ll display a series of letters as the individual options available in our second drop-down list (which we christened DynamicOptions). If the user selects Numbers<\/B>, we\u2019ll display a series of numbers as the options available in the second drop-down list. Each time we change the value of PickCategory we\u2019ll run a subroutine named RunScript; hence the parameter onChange=”RunScript”<\/B>: <\/P>
<select size=”1″ name=”PickCategory” style=”width:100px” onChange=”RunScript”>\n    <option value=”Characters”>Characters<\/option>\n    <option value=”Numbers”>Numbers<\/option>\n<\/select>\n<\/PRE>\n
That second drop-down list, as we noted, is named DynamicOptions; when the HTA opens it displays, by default, a series of characters as the drop-down options (if you aren\u2019t familiar with the HTML tagging for creating a drop-down list then take a look at one of our HTA tutorials<\/B><\/A>). The complete tagging for this drop-down list looks like this:<\/P>
<select size=”1″ name=”DynamicOptions” style=”width:100px”>\n    <option value=”A”>A<\/option>\n    <option value=”B”>B<\/option>\n    <option value=”C”>C<\/option>\n    <option value=”D”>D<\/option>\n    <option value=”E”>E<\/option>\n<\/select>\n<\/PRE>\n
Of course, these default options aren\u2019t set in stone; instead, they\u2019re going to change each time the user makes a new selection in the PickCategory drop-down. How? Don\u2019t worry; we\u2019ll tell you how. <\/P>\n
Zzzzz \u2026 <\/P>\n
Sorry. Just resting our eyes.<\/P>\n
Now, where were we? That\u2019s odd; we have absolutely no idea what we were just talking about. But that\u2019s all right; let\u2019s just go ahead and talk about the subroutine RunScript, the subroutine that runs any time the user makes a new selection in the PickCategory drop-down list.<\/P>\n
Zzzzz \u2026 <\/P>\n
Um, so what does<\/I> happen in the RunScript subroutine, you ask? To begin with, we use this block of code to remove all the existing options from the DynamicOptions drop-down:<\/P>
For Each objOption in DynamicOptions.Options\n    objOption.RemoveNode\nNext\n<\/PRE>\n
Why bother with this? That\u2019s easy: each time we make a change in the first drop-down list we want to completely replace all the options shown in the second list. The easiest way to do that is simply to remove all the existing options and then start adding new options from scratch.<\/P>\n
Speaking of which, our next step is to determine the actual value that was selected in drop-down list 1, then begin the process of assigning the appropriate set of options to drop-down list 2. (To that end, the first thing we\u2019ll do is put all those options into an array named arrValues). The following block of code determines whether or not the value Characters<\/I> was selected in our first drop-down; if so, it then assigns a series of letters to arrValues:<\/P>
If PickCategory.Value = “Characters” Then\n    arrValues = Array(“A”, “B”, “C”, “D”, “E”)\nEnd If\n<\/PRE>\n
Meanwhile, this block of code assigns a series of numbers to arrValues, but only if Numbers<\/I> was selected in drop-down 1:<\/P>
If PickCategory.Value = “Numbers” Then\n    arrValues = Array(“1”, “2”, “3”, “4”, “5”)\nEnd If\n<\/PRE>\n
Once we\u2019ve assigned the appropriate set of values to arrValues we then use this block of code to create the new options for drop-down list 2:<\/P>
For Each strValue in arrValues\n    Set objOption = Document.createElement(“OPTION”)\n    objOption.Text = strValue\n    objOption.Value = strValue  \n    DynamicOptions.Add(objOption)\nNext\n<\/PRE>\n
What we\u2019ve done here is set up a For Each loop to loop through all the items in the array arrValues. For each of those items we create an instance of the Option<\/B> object; this object represents an individual option in a drop-down list. For each instance of the Option object we then assign the value of the array item to both the Text<\/B> and Value<\/B> properties:<\/P>
objOption.Text = strValue\nobjOption.Value = strValue\n<\/PRE>\n
In other words, if the first value in our array is A<\/I> we create a drop-down list option that not only has the label (Text) A<\/B> but has the same value as well. We then use the Add<\/B> method to add this new option to drop-down list 2:<\/P>
DynamicOptions.Add(objOption)\n<\/PRE>\n
And then we loop around and repeat this process until all the items in the array arrValues have been configured as drop-down list options. Once that\u2019s finished we are done.<\/P>\n
And not a moment too soon. Do you realize that, as we write this column, it\u2019s not even 10:00 AM yet? This is going to be a long day.<\/P>\n
Incidentally, for those of you who haven\u2019t seen The Simpsons Movie<\/I> yet, the Scripting Guy who writes this column found it refreshingly-good. There\u2019s no doubt that the Simpsons glory days are behind them (no; why would<\/I> a statement like that make anyone think of the Scripting Guys?); nevertheless, the movie had some pretty entertaining parts to it. For example, the Scripting Guy who writes this column has spent most of this morning singing the Spider-Pig song:<\/P>\n
Spider-Pig, Spider-Pig<\/I>
Does whatever a Spider-Pig does.<\/I>
Can he swing from a web?<\/I>
No, he can\u2019t; he\u2019s a pig.<\/I>
Look out: here comes the Spider-Pig.<\/I><\/P>\n
Trust us: that\u2019s a good song. <\/P>\n
Or at least it is at 2:00 in the morning.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How can I configure a pair of dropdown lists in an HTA so that, when I change the selection in the first list, the options available in the second list also change?— PC Hey, PC. Before we get going today, we\u2019d like to make it clear that the Scripting Guy who writes […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-64343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How can I configure a pair of dropdown lists in an HTA so that, when I change the selection in the first list, the options available in the second list also change?— PC Hey, PC. Before we get going today, we\u2019d like to make it clear that the Scripting Guy who writes […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=64343"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/64343\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=64343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=64343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=64343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}