Double drop-down display

[phppup]

I'm not sure if this requires a CSS or a JavaScript approach, so hear me out.

Note: I've been toying with several coding approaches that will get the job done, but I'm seeking an ultimate answer.

I have categories and sub-categories: eg: candy (gum, coco), fruits (apple, orange, pear), meat (burgers, steaks) etc.

The user has to select ONLY one item, eg: what did you eat last?

My thinking is to have a <select> drop-down menu with category titles. When an option is selected, a secondary drop-down should appear.

I've got one very old school method that works by literally populating a second drop-down based on the first dropdown selection. But it needs to be promoted in a separate motion (not a seamless flow).

I also have a partial CSS solution extracted from dropdown menu designs (which seems to be more of what I'm looking for).

The real obstacle is that most users will be using Smartphones to make they're selections.

As an Android user I'm familiar with how a <select> is displayed, yet a CSS menu using <a href> responds more like a webpage (and seems too small to view comfortably).

Likewise, if a second tier <select> menu were to cover the phone's screen, there would need to be an easy way to go backwards (in the case of an incorrect category selection).

Any guidance or solutions for this?

Edited June 11, 2023 by phppup
Forgot item

[requinix]

Forget the technology, forget the dropdowns and the Javascript and the CSS, forget all the details for a minute and try to put yourself into the shoes of a user:

You've been asked to provide the food you ate last. You can choose a type of candy, or a type of fruit, or a type of meat.
What would you, as a user, ideally want to see in order for you to make the choice. Would you rather have one list of everything? Do you want to choose the type of food first and then the specific food second? Do you want all the lists of food available at once and you'll just pick one from the appropriate list? Something else?
And does your answer change if you're on desktop vs mobile?

Decide what the overall user experience should be, at a high level, as if by someone who doesn't understand web development, and create a UI to support it.

[phppup]

@requinix I understand what you're saying, but I think I am simplifying the list by categorizing the items.

An admittedly backward example but, imagine you needed to know what was in each of the 42 aisles of a supermarket/Walmart.

Before going down aisle 18, you would evaluate whether any of the sub-category items interested you, and the same for each subsequent aisle.

If you're looking for cookies, you would skip the aisles containing frozen food and automotive items.

Isn't that better than an infinite number of radio buttons? 

It is also expected that users will use this menu regularly, and (like a consistent shopper) learn where to find the sub-category item easily.

My supermarket keeps cupcakes in the bread aisle, and I remember it.  A different location (same company) puts the cupcakes in the cookie aisle. In either event, I can confirm that I'm in the right place by checking the signage before trekking up the aisle unnecessarily.

That's my thinking.

Edited June 12, 2023 by phppup
Typos

[requinix]

8 hours ago, phppup said:

Isn't that better than an infinite number of radio buttons?

Which is why many big supermarkets have an "index" somewhere: a sign or list listing a bunch of different types of items and which isles they're on. Because they want to make it easy to find things - but not too easy.

But that aside, you're at least thinking like a user now in recognizing that going through a list of everything is too much - unless, perhaps, it's sorted (which supermarket isles aren't, but that's another story).

So back to the webpage. You're looking for cookies. What do you want to do?
Do you want to scroll through a list of categories until you find one that may or may not be applicable? Like you said, if I want cupcakes then it could be with breads or it could be with cookies, so there's still going to be some guesswork.

Here's a more specific question: do you, as the user, actually care about the category? For example, if you could find cookies without having to know whether it's in the bread isle or the cookies isle, would you like that?
Hint: go into the post editor box and type "@r"...

[phppup]

Quote

Hint: go into the post editor box and type "@r"..

I don't think I'm ready to code that at this point. But maybe....

Nonetheless, I've uncovered the <optgroup> tag, which seems to be what I was looking for from the start.

And I think that better demonstrates how I wanted to "categorize" the options.

Now I'd like to be able to collapse the options so that the initial drop-down is only a list categories, with each category list appearing as needed (iie: onclick)

But I am making progress.

[requinix]

1 hour ago, phppup said:

I don't think I'm ready to code that at this point.

Nor are you expected to: Javascript development has these things called "libraries" which you can use to do the work for you.