Cascading Drop Down Menu With 4 Hierarchical Boxes?
Aug 16, 2010
I'm trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do.
Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it:
1. Pick the brand (BMW, Mercedes, Etc.)
2. Pick the type of car (Sports car, SUV, Mini Van, etc.)
3. Pick the color (blue, green, etc.)
4. Pick the price ($0-$19,999/$19,999-29,999/etc.)
So far I have the first two boxes down by using the following site: [URL]. Now my problem is that the site only allows for the first two boxes to be made, and says that
"the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality."
Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum.
how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate.
We have had this script on our site for a while, and it has always worked in any browser we have tested. It dynamically fills one select based on the selection of another select. Unfortunatly, with the release of NS 7, and the related Mozilla engine, this script no longer works. Code:
What I need to be able to do is have the user presented with a single dropdown menu within a form using HTML <SELECT> and <OPTION>. Once they choose a particular option I then want another dropdown to appear alongside it with a list of options that are dependent on what was selected in the first dropdown. Then I want the same thing to happen a third time, i.e when the user selects an option from the second dropdown a third one appears on the screen to the right of it and then whatever the user chooses from this final dropdown is used in the form submission.
Because I am a complete beginner it would be really useful to have an actual code example that I could then modify with my own options.
I'm using a dynamic cascading dropdown javascript for my webpage URL... that for the most part is working well.Two problems:
1. I'm using some php to make the dropdown a form so that when a user makes choices and submits, those values are retained. This works well in Firefox 3, but not in IE. It looks like the html submitted="submitted" tags are being put into the html code in IE, but for some reason IE isn't taking that into account.
2. I would really, really like the third drop down to revert to "Choose a song" when a new composer is chosen. It automatically reverts to "choose a book" (the second drop down), but for the life of me nothing I try can make both drop downs revert when the first drop down is changed.
I have been asked to produce a web catalogue of services and associated options, this eventually will be used for ordering the services.
My initial thought was to use a set of cascading drop downs, select an option from the first fills the available options for the second and so on. Given the current buzz about Ajax this would seem an opportunity to try out some of its features.
Could anyone point me at an example of what I am trying to do? For information, the target web server environment is Apache with both mod perl and mod php being available.
I am working on real estate web site. The search module requires the following client-side functionality: 1) a radio button group to select sales <ORrental 2) based on the above selection, a dropdown list should display the applicable price ranges.
The functionality is identical to the code found @ http://webdeveloper.earthweb.com/re...ops_simple.html
The only difference being that the first dropdown should be replaced by a radio button group.
Having very limited knowledge in JavasScript, I have been unable ta adapt the code.
Not sure if this has been covered ( a google search came up pretty bare).
I have a site that: - has multi-level cascading menus - floats center of the browser window - Will have fairly heavy Safari and Firefox views (~25%)
Finding a cascading menu is easy, I trip over about half a dozen of those a week. The problem is when you maximize on a big screen in firefox, some pages will lose the right-hand side scrollbar. Because the cascading menus float along with the page, the "distance from center" most cascading menus use is off by hte distance of what would be hte scroll bar.
Does anyone know of a cascading meu that does NOT have this problem (i.e. center foating screen, menus dont knock off when the browser is maximized in Firefox?
I want to have a bracket page, so you can chose from two options, and then two chosen people are paried to face off... espn.com has a bracket for the sexiest athlete right now - something like that. What I want is drop down box 1A to have two options. When one option is chosen, it is added to box 2A. The user would also chose one of two options from 1B. That choice would also be added to 2A. Then I need this to recursively work for N number of rounds, and the total to start would be 2^N.
i'm having with a superfish menu i have tried to add to my wordpress site.The menu seems to work fine for the base-level (top parent pages) menu items.But the drop down menus seem to flash on screen for just a second and then disappear when the mouse hovers over the menu items.To see an example, please check out the top menu on this temporary development page: http:[url].....I have tried adjusting the z-index in superfish.css file but it doesn't seem to be having any effect.
Is this possible? Using the scriptaculous library I'm trying to replicate the structure of my sites main navigation menu which has sections and sub sections - I've not seen any example implementations of this, just one list or two separate lists, never lists within lists.
I currently have a Drop-Down menu, which has headers you click on to show the links. This menu only allows one drop to be expanded at a time, and can be viewed here [url].
I would like the headers to be able to have 'sub-headers' inside, which also drop-down,to reveal the links. I want them to have a different header colour, and to have the same rule where only one can be open at a time. while keeping the rule with the main headers.
I need to check that a user's birthday has been filled out completely, using drop down menus. I can validate each of the menus individually (see code below), but what i really want to do is make one check that all three are selected so that I don't have 3 extra error labels.
I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this?There are three drop down boxes for users to select their course. They are: -
I need a drop down box with numbers 1,2,3,4....listed. When the user selects 2, two text boxes appear below, ajax style ! if they select 3, three boxes etc etc.
The purpose of the code is to slideToggle open one of two hidden sub-nav bars when either of two different menu items are clicked upon - instead of a drop down menu. What doesn't work is the hiding of the div that is not required, if it is already open. Viewing in firebug shows that the appropriate classes are being applied - I suspect the reason is that slideToggle has been somehow set and cannot be unset via another object - but perhaps that is not it at all?
$(document).ready(function() { //add .toggle function to appropriate li element $('#hozmenu li:nth-child(4)').toggle(function () { //set 4th menu links colour to be green whilst div is shown $('#hozmenu li:nth-child(4) a').css('color', '#95d890'); $('#toggle_nav_services').removeClass('toggle_show'); [Code]....
I actually want to make a horizontal drop down menu with a sub menu.As far as I have researched, I think that it can be done by JavaScript. I have searched for some java scripts but they are very long and complex.
That made me wonder that for a funcitonality like a Drop down is so complex?
So here is my question : Is there any JavaScript that can be applied for drop down menu exclusively? Which just presents logic of drop down solely?
I'm building a drop down menu like [URL] or [URL] or [URL] the effect I'm trying to achieve is to have the top menu item showing a background image via css and create a stylized design with the sub-menu. Using CSS when I hover over the sub menu the background image of the top item disappears. So I'd like some guidance with javascript on how to keep the back-image while hovering on the sub menu.
Is there a good library available (jQuery or stand-alone) that allows you to customize the troublesome form elements that aren't very receptive to CSS across browsers?
I was looking to try to match drop downs, radio buttons and check boxes with the same look and feel as everything else.
I am adding drop down boxes to a div using javascript on a user action, if these boxes are assigned a value by the user then the user adds more boxes the values previously selected are cleared.
It does not happen if an option is selected in the HTML when the page is loaded.
, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look [URL] The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working, it seems to be sliding down even though this was not defined in the code.
Let me start by saying javascript is a weak point for me. I have a form with hierarchical data (in this case users, who have galleries, which have albums, which have images) now the form will be out put from a database query and look something like this:
I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear...
