Pop up drop down list box!

[micjohnson]

Hi there!

Is there any way to pop up a drop down list box. I have a drop down box and the values are "Yes", "No" and "Both".

If i choose "Yes", then it should open another drop down box which contain some values. If "No" means, open up another drop down box. Its same for "Both" also.

Is there any way in CF or Javascript?

Guide me. Thanx.

micjohnson

 

[tlhawkins]

Yeah, it can be done micjohnson,

Here is an example:

</script>
<SCRIPT Language=&quot;JavaScript&quot;>
<!--

function updatesel(form)
{
form.Two.length = 1;
form.Two.selectedIndex = 0;
choice = form.One.options[form.One.selectedIndex].value;
if (choice == &quot;first&quot
{
<CFLOOP index=&quot;x&quot; From=&quot;1&quot; to=&quot;4&quot;>
<CFOUTPUT>
(form.Two.length)++;
form.Two.options[form.Two.length - 1].text = &quot;SubChoice #x#&quot;;
form.Two.options[form.Two.length - 1].value = &quot;SC#x#&quot;;
</CFOUTPUT>
</CFLOOP>
}
if (choice == &quot;second&quot
{
<CFLOOP index=&quot;x&quot; From=&quot;1&quot; to=&quot;6&quot;>
<CFOUTPUT>
(form.Two.length)++;
form.Two.options[form.Two.length - 1].text = &quot;Second SubChoice #x#&quot;;
form.Two.options[form.Two.length - 1].value = &quot;SC#x#&quot;;
</CFOUTPUT>
</CFLOOP>
}
}
//-->
</script>


<FORM METHOD=&quot;POST&quot; ACTION=&quot;look2.cfm&quot; NAME=&quot;myform&quot;>
<SELECT NAME=&quot;One&quot;
OnChange=&quot;updatesel(this.form)&quot;
WIDTH=&quot;250&quot;>
<OPTION VALUE = &quot;%&quot;>All</OPTION>
<OPTION VALUE = &quot;first&quot;>First choice</OPTION>
<OPTION VALUE = &quot;second&quot;>Second choice</OPTION>
</SELECT>
Look
<SELECT NAME=&quot;Two&quot; WIDTH=&quot;250&quot; >
<OPTION VALUE = &quot;%&quot;>All</OPTION>
<CFLOOP index=&quot;x&quot; From=&quot;1&quot; to=&quot;6&quot;>
<CFOUTPUT>
<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
</CFOUTPUT>
</CFLOOP>
</select>
</FORM>

The only thing to watch out for is that you have to have all of your options loaded when the page is served, you can't requery for the data without refreshing the page.

In this example the first list is hardcoded in the form. The second list is built in the JS function by a simple CFLoop depending on your first selection. Just change the CFLoops to hold your info and you're set.


Have fun.