How to make a dynamic menu with a dependent sub-menu?

I am a new coder and will do my best to describe clearly what I want to do and will hope someone can point me in the right direction or give me some suggestions.

My page is being coded in PHP and references data from my MySQL database.

I want to have a drop down menu selection, which will then give more options depending on what is selected in the first menu. Many of the options that will be available will be pulled in from my database, and will be based on the user’s authorization/access level.

I really don’t know where to start with this though.

I have done something similar using html forms and posting actions through selects, but since I have a dependent menu, I don’t want the user to have to hit a select button twice.

Any advise or references to code suggestions on the net would helpful. My attempts to find examples always point to javascript code, which will not work for my scenario.

Why will JavaScript not work for your scenario? As I understand it, the alternative is to submit the first menu and redraw the page with the submenu settings - if you want to avoid that, JS is the way.

Save your menu lines in the database and build the submenu on-the-fly? Get the submenu by some reference?

Here’s an example from the net where Javascript is used to create a dependent menu:

So for my needs, I would replace the lines containing the “Select a Service” options, with a PHP loop that would pull in my options from my database, and use PHP to complete the Javascript for these options.

That part I believe I should have the knowledge to do.

The problem is, the second part.

In the example below, the second sets of options have already been populated and are hidden. In my example, if I were to populate the second sets of options, it would be a lot of queries from different areas of database to create the hidden options. I guess I could do it, but it seemed to make more sense in my mind only to populate a set of options tied to the first selection. Essentially, I want to do this:

  1. Check if user is logged in.
  2. Query database to check what areas the user is authorized to select from.
  3. Populate each area as a menu selection in a pull down menu.
  4. As soon as the user makes a menu selection, then query the database to check what sub-areas the user is authorized to select from.
  5. Populate each sub-area as a sub-menu selection in a pull down menu.
  6. As soon as the user makes a sub-menu selection, then show the content.

Can the above be done, or do I instead need to just pull in all the options once the user is logged in and just hide the ones that are not relevant to the current task?

Roughly that’s the kind of thing I’d expect you to need to do - once the menu selection is made, you call your PHP code to get the entries for your sub-menu. But you said you can’t use JavaScript in your scenario, so I think the only way you’ll be able to populate the submenu is by hitting “submit” after the menu choice is made.

I wouldn’t get all the options and hide / display them as required personally, but of course that depends on how many permutations and combinations there are. But if you can’t use JavaScript then either would need a “submit”, wouldn’t they?

I’m still very unfamiliar with all the options and functionality of the different types of coding languages – I meant to say that I don’t think I can use JavaScript to produce what I want – but I might be completely wrong on that.

Once the first selection is made, then that is when I want to populate the second set of options – but I can’t figure out how to do that.

In theory, I guess the logic flow would be this:

  1. User selects an option from the parent menu.
  2. When the selection is made (some sort of click event detection), then POST that option and refresh the page.
  3. The new page will default the user’s prior selection for the parent menu, and now the child menu will options will be displayed.

I am only guessing at how this is normally done. I’m not at all familiar with other coding stuff like JQuery and Ajax. Should I be using these for this? I’m pretty lost at how best to make this happen.

Yes, that’s exactly what you want to look at. You can capture the “select” event from the first menu, and use that to call your PHP code to return the entries for your sub-menu. You can extract stuff like the user id from your page, and pass that (along with the main menu selection) to your PHP to tailor it as you need it. Your PHP code will just echo the html for the sub-menu options, and your Ajax success() function can insert them.

Have a look at the code in this topic in case it helps, it has a main menu and two levels of sub-menu below it: AJAX and Php not keeping values between my drop downs - #3 by johannesmoolman - yours will be simpler with the single sub-menu level.

You could always submit the form when selection is made using this in the <select> tag.

onchange="this.form.submit()"

Then if “DB Menu” is built in array having second level values listed under first level primary keys, the second select options can be populated using the children under this primary key when first POST select has a value matching these First level array keys. The menu array can be built from DB to as many levels deep as needed and chained selects can also providing select options to any level if previous levels are Known and in this array…e.g. If First, Second and Third keys are known and have children in the array, show these as Forth options…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.