Creating Dynamic Drop-Down Menus

Hello,
I am a beginner to CF and web programming, but I have a good
understanding of how things work (and I have a good course, hehe. )
I have created a small page that has several select menus that are
populated by database queries, however, I would like them to
populate differently depending on what has been selected on the
previous one. How can I populate a drop-down menu in real-time
based on the selection on another one? I know I would need to have
different queries for each option, but I have no further info on
what I should use. Help please? Thanks in advance!

you can go 2 routes.
1 is to create a JavaScript array and use the onchange event
of select #1 to parse that array and populate select #2 based on
the elements within that array position. not fun if you're not into
JS...but a good way to get familiar with JS :)
2 is to use AJAX. JSMX is a very easy to use AJAX library (
http://www.lalabird.com) and I
think you'd be able to implement it with minimal efforts.
Adobe also has its SPRY AJAX library...but it's currently in
development and while there is no shortage of code samples
(including one to do a "related select" if memory serves), there's
no formal API documentation yet.
oh...i guess there's an undocumented 3rd option. there's a
custom tag called two_selects_related (or something similar).
essentially what it does is creates that JS array (mentioned in
option 1) for you using CF.
I'd kind of lean towards the AJAX implementation myself
(using either Spry or JSMX or the AJAX library of your choice). but
that's just a matter of opinion. Others might suggest the custom
tag route. Your call :)

Similar Messages

Best practice for creating large drop down menus?

I'm attempting to transition from using Photoshop to Fireworks cs4 for design and prototyping of websites.
Right now I'm working on re-creating a nav bar design in FW. The design calls for large drop down menus with lots of non-standard content similar to nymag.com
I've got each button setup as a 2 state button, however when the large drop down spans across to the right, the other buttons next to it appear to be over the first fly out. If I move that layer on top of the others, all the other buttons begin to act strangely. Any ideas?

I have to agree with Pixlor and here's why:
http://www.losingfight.com/blog/2006/08/11/the-sordid-tale-of-mm_menufw_menujs/
and another:
http://apptools.com/rants/menus.php
Don't waste your time on them, you'll only end up pulling your hair out :-)
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

How to create Dynamic Drop down list ?

Hi experts
I want to create a Dynamic Drop down list that should be an Editable,after editing that i need to save.
thanks,
vikram.c.

Hello,
Please go through this link:
https://www.sdn.sap.com/irj/sdn/wiki?path=/display/vc/linking%2bdrop-down%2blists
If useful reward.
Vasanth

Dynamic drop down menus

Hi all,
I am wanting to know how to create a drop down menu where
each item takes you to another page (a subset of info relating to
the chosen item).
I know this should be a simple thing to do -I just can't get
the part where I link my created drop down menu (which took 5
seconds), to the target pages (also complete) ??
(And the Help is of not much help for my 100%, non-technical
brain :( ..)
Thanks!

Inside code view, place the curser where you want the menu.
Select the spry tab, and choose the fourth button from the
right. It should be right under the Data button. Then select the
horizontal menu from the pop up menu.
Next hover over the new menu and click the blue spry menu tab
that shows up. The properties menu will allow you to edit what is
in the menu. If you do not need the drop down children, select them
and click the "-" above it.
With the menu item selected in the properties menu, on the
right side you can name each one and also give it a link, title,
and target.
Then play with the css file that dreamweaver generated for
you and you are in business. One safty thing, make a copy of the
css file as a back up. So if anything does happen, you do not have
to start all over. Also if you print out the css code, you can get
an idea of what everything is doing by reading the comments.
Hope that helps.

Three Dynamic Drop Downs

I have to create a form that would have dynamic drop down menus, and then depending on those choices populate a number of fields.
Here is the basic structure
Division ( 5 choices )
Center ( dependent on choice of division )
Dept ( dependent on the choice of division and center )
The department will decide what charge codes will appear on the form.
I have been building dynamic drop downs with if else statements, but I really think I need an array. I know they are going to change something and then I will have lots of changes to do. Updating an array sounds so much easier. Something like:
Division, Center, Dept, Costcode1, costcode2, costcode3
Can I do this? How do I do this. I saw a thread about inserting an array as a variable in the hierarchy, but I can't seem to find how. And then how do I reference it once its built
Thanks in advance.
Kurt
[email protected]

For the United States, we use this:
http://www.usps.com/ncsc/addressinfo/citystate.htm

DHTML Drop down menus

Hi, I have created DHTML drop down menus. I did them exactly
as instructed, but for some reason the invisible hide is finicky. I
have my invisible set out a little larger than the layer, but it
seems like it only disappears if I move to the right or onto the
tabs... Not up, down or to the left.
Here is the link.
http://www.sportsamericainc.com
Thanks!

Then why not use their support forums for this question?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"kodog" <[email protected]> wrote in message
news:[email protected]...
>I got the diretions from
http://www.projectseven.com
and another site that
>I
> don't have on this computer...
>
> If you need to see the page its www.sportsamericainc.com
>
>
> </style>
> 
> <script language="JavaScript"
type="text/JavaScript">
> 
>
> </script>
> <script language="JavaScript"
type="text/JavaScript">
> 
> </script>
> <style type="text/css">
> 
> </style>
> <link href="CSS/bodylink.css" rel="stylesheet"
type="text/css">
> <style type="text/css">
> 
> </style>
>

Utilizing Custom Tags to create a dynamic drop-down menu

Hi to all,
I am looking to create a dynamic .jsp to display to the user a drop-down list. This list is based upon data in database. The data will be passed as an application bean. This list will vary depending on application criteria.
I would like to use a custom tag to create the drop-down menu. I am attempting to keep the .jsp page strictly .jsp, no Java. (I have been successful in creating & using an iterator tag.)
Can someone point me in the right direction, or give me an example?
thanks!
Susie in Virginia Beach

What exactly is it you don't know how to do? Write a custom tag or write database access code?

I have created a Fireworks nav bar with drop down menus. Can't get the weblinks to save.

I have been trying to add the web addresses in my Fireworks nav bar drop down menus. I can't get them to "take". I add the address, click done and some of them save and some don't. I am pulling my hair out! HELP!

the easiest way is constructing your menu with frame labels
now i have no way of knowing how you are constructing it ..so
this may not work for you ...i assume that you have created a main
button ...that has been converted into a symbol & then
duplicated to create all other buttons
okay here it goes ..i hope i dont confuse you
i will explain how to create 1 button with 4 submenu items
with the trems that i mentioned above
but iam not going to explain all the details of creating a
whole nav bar
because it just takes too much typing ...i assume you already
know this
sooo ! ...lets say this is the Portfoio button ...inside the
symbol now
create 8 layers ...the order is going from top to bottom
actions
labels
submenu Logos
submenu Illustration
submenu Animation
submenu Coolstuff ."you will name your button items how you
like" ...
main button....lets just say Portfolio !
invisible btn for main button
so now on with the hard stuff
create 20 frames ...stop action on frame 1 ...frame 9
...frame 20
on the labels layer now ....name frame1 "Closed" ...frame 10
"Open"
on the submenu Logos layer ...create a keyframe on frame 10
all frames before the 10th frame will be blank frames
repeat that for the rest of the submenu items
on the main button layer you will just place the main
Portfolio button on frame 1
& on the invisible button layer ..the inv btn is going to
be placed on frame 10
all this is iam hoping your have converted everything into1
symbol
all you need to do know is attach code to the main Portfolio
button & the invisible button
so click on the Portfolio button
on (rollOver) {
gotoAndStop("open");
invisible button
on (rollOver){
gotoAndPlay("closed");
& that should be good ...very simple !
then just repeat this process for every button that makes up
your nav bar ....& it doesn't matter if your inv buttons
overlap each other or your main nav buttons are touching each other
peace John

Dynamically updating a value based on drop down menus

Hi,
I am trying to make a website for a new computer company.
Part of the website allows you to choose different componets, like
the Dell website. It has different drop downs like CPU, Case,
motherboard etc which list the option we have chosen then it gets
all of the records from each database. So for CPU it checks to see
what motherboard is selected and displays all of the CPUs that are
compatible with that bpard from the CPU data base.
It has the price at the bottom of the page which is
calculated by adding all the prices of the drop down menus together
but if I change an option it doesn't change the price.
How can I have the price dynamically change based on
different values being selected from the drop down boxes?
Thanks for any help
Lewis

You'd do some kind of onChange with the select. Get the value
of the current index in the select and pass that over to whatever
needs it.
Using a JavaScript framework may be best and easiest - like
jQuery. It allows you to do stuff like this quite easily. Though
I'm no expert either - just getting into it.
Are these chained selects then? I also think there's a CF
only version / custom tag out there for this - but it would require
a page refresh everytime the list is changed.
You could also use AJAX I guess.
Cheers,
Mikey.

--urgent Can I use table data to create a dynamic drop down menu?

Hi,
I am asked to investigate the possibility of using APEX to create a table driven dynamic drop down menu? The deadline is tomorrow but I have spent quite a bit of time but still have not any clue. Can any one have such experience to point me a way to focus on?
Many thanks.
Jennifer

Thanks you very much for the help Kevin.
Currently my company is using htp.p style to create web app and using the dynamic menu in a similar way as you explained. Now they want to move to Apex and still keep dynamic menu functionality. After reading your response and research I have done I think I can embed it into Apex application by creating the similar table and PL/SQL package and let Apex to call the PL/SQL package when the application is first called. However may I ask you a question about how to call such pl/sql procedure in Apex? .
The current application has the following URL, from which the procedure pkg_main.print_menu is called and html home page with dynamic menu is displayed.
Http://app server:1234/pls/applicationname/pkg_main.print_menu?p_new_window=N
BUT what about the Apex? The Apex URL format is like the following, where 11563 and 1 is application id and page number. Assume that 1 is home page, but HOW the procedure is called, from WHERE?
http://apex.oracle.com/pls/apex/f?p=11563:1:3397731373043366363
Jennifer

Creating drop down menus in JSP using custom tags

Hi, i am working on a JSP which has custom tags for displaying menubar and menus, now i want to have these menus converted into drop down menus, and the submenus displayed onmouseover event. I am getting solutions with pure html page calling javascript functions.But i dont need this, i want the work done by my TagHandler class which sends the output to output stream, which in turn is transformed in to actual HTML by a XSLT embedded in my JSP.
Please help as i am new to custom tags, and desperately in need of help.
If possible give some sample code or useful links.
I will be highly grateful.
Thankx in advance

that's fine, but the tag has to, ultimately, generate the HTML/Javascript stuff like you've already seen.

Drop down menus to create multiple variables.

Hi Everyone,
I'm very new to scripting so I apologize ahead of time for my "newbieness".
I would like to have a dropdown box that, depending on the item chosen, can set several variables. Then I would like to use those variables for other calculations throughout the form.
BTW...this is for a character sheet I'm creating....I know...nerdy...but hey I OK with it :-)
For example:
The character sheet has 6 variables that are affect the rest of the sheet...."vSTR", "vINT", "vCHR", "vWIS", "vDEX", "vCON".
Let's say I have a drop down box with choices "Elf", "Dwarf" and "Human"...
...if "Elf" is chosen it will set the "vDEX" to 2 and the "vCON" to -1....the other variables would not be used....or set to 0.
...if "Dwarf" is chosen it will set the "vCON" to 2 and the "vCHR" to -2...the other variables would not be used....or set to 0.
...if "Human" is chosen all of the variables would not be used....or set to 0.
So:
1. I'm not sure how to create the drop down box.
2. How do I accomplish the above example.
3. I know how to do a simple calculation but how do you script a more complex calculation with parenthesis ....ex... A*((B+C)/(D-E))?
Thanks in advance for helping. Once I see it I can usually go from there...getting started is where I get stuck. I really admire coders :-)
Jack

This is quick and from memory, i can't test it right now, but it should give you an idea. Put this in a document level script:
function SetNotesField() {
     // Set up a variable to hold the entire NOTES field value
     var Notes
     // Add the value for each dropdown box here (replace 'GetValueFor_SE_FieldHere' with the value you will use for that dropdown)
     if (this.getField('SE').value == 'true') {
          Notes = Notes + 'GetValueFor_SE_FieldHere' + '\r' // add a carriage return if needed
     if (this.getField('SQ').value == 'true') {
          Notes = Notes + 'GetValueFor_SQ_FieldHere' + '\r' // add a carriage return if needed
    //...Duplicate the above for any other fields you need
     // Set the value of the notes field to the concatenated value for all dropdowns.
     this.getField('NOTES').value = Notes
For each dropdown field, add the following to the 'OnBlur' event:
SetNotesField()

What's the best way of creating drop down menus on CS3?

Hi people,
I'm using CS3 now. I used to build drop down menus in
fireworks, but now with CS3 theyre a bit glitchy and I have
problems centering the page, as fireworks CS3 now generates CSS for
each menu - (dreamweaver also gets confused which CSS to use?)
Is SPRY menus the way to go now? It looks quite time
consuming styling them with CSS? I quite like using rollover
images, is this going to make life hard doing it the SPRY way?
Any tips or advice would be appreciated before I start.
Whats your experience of SPRY shall I go for that or stick to
something more tradional?

"BeardedFlipFlop" <[email protected]> wrote
in message
news:f73k74$ko4
>
> Is SPRY menus the way to go now? It looks quite time
consuming styling
> them
> with CSS? I quite like using rollover images, is this
going to make life
> hard
> doing it the SPRY way?
It's not really all that time consuming if you have an
understanding of
CSS... the stylesheet that is used for the Spry menus is
fully commented
(thought it could be better explained in some cases), but
once you
understand what each section does and how to make the style
change it's not
that difficult.
Otherwise, go with the tutorial already posted.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/

Creating drop down menus that change dependant upon previous menu

I need to create a drop down menu and then have the next drop down change its content based on the selection in the previous menu
Would anybody have any code that I could play around with that would help me achieve this?
Thanks!!
Mark

Hi Mark,
This should get you close:
Create a .cfc call it product, as in save as product.cfc
You'll need to change the datasource name and the FROM clause below on both queries.
<cfcomponent output="false">
    <cffunction name="getProduct" access="remote" returnType="query">
        <cfset var data="" />
          <cfquery datasource="yourdb" name="data">
            SELECT product_uid,product_title
            FROM yourtable
        </cfquery>
        <cfreturn data>
    </cffunction>
    <cffunction name="getSubProduct" access="remote" returnType="query">
        <cfargument name="product_uid" type="numeric" required="true">
        <cfset var data="" />
        <cfquery datasource="yourdb" name="data">
            SELECT sub_uid,sub_title
            FROM yourtable
            WHERE sub_product_uid = #ARGUMENTS.product_uid#
        </cfquery>
        <cfreturn data>
    </cffunction>
</cfcomponent>
Imbed this in your your cfm page:
<cfselect
    name="Product"
    bind="cfc:product.getProduct()"
    style="width:387px;"
    size="1"
    multiple="No"
    required="No"
    display="product_title"
    value="product_uid"
    bindonLoad="True">
</cfselect>
<cfselect
    name="Sub Product"
    bind="cfc:product.getSubProduct({product_uid})"
    style="width:387px;"
    size="1"
    multiple="No"
    required="No"
    display="sub_title"
    value="sub_product_uid">
</cfselect>

Is there a way to create drop down menus in IWeb

I want to have drop down menus from the main ones on my website.
How do I do that?

This is the code I use in the html snipet
<script language="JavaScript">

</script>
<select name="list" size="1" onChange="window.top.location=getSelect(this)">
<option value="#">Select A Year</option>
<option value="http://web.mac.com/gartside1104/Photoyears/1960.html">1960</option>
<option value="http://web.mac.com/gartside1104/Photoyears/2008.html">2008</option>
</select>
Obviously you'll need to change certain parameters for your own use.

Creating Dynamic Drop-Down Menus

Similar Messages

Maybe you are looking for