input fields – Alternatives to nested drop-down lists?

When a user uploads a new document, they must assign that document to a certain category and subcategory. Our current solution uses two drop-down lists for this.

The problem

So currently the workflow looks like this:

  1. User selects category
  2. The options for the subcategory are loaded in the second drop-down list, depending on the selection for the first drop-down list
  3. User selects subcategory

However, there is a major limitation to this solution: the user cannot analyze all the possibilities at a glance. This means that if they have certain subcategories in mind, but do not know the corresponding category of the desired subcategory, they will have to click on all the categories in a trial and error manner. to find the required subcategory.

Since the subcategories are loaded lazily when a category has been selected, there is also no possibility to search in all the subcategories.
Another stumbling block regarding research is that there could be sub-categories also named in different categories.

The alternatives

I have read similar questions here on UXSE and the only viable alternative seems to be a tree view. I don't think there is anything wrong with tree views in general. However, the categories and subcategories are created and maintained by administrators and are therefore not limited in number. So we are dealing with 1 ..not categories, which each contain 1..m sub-categories. Therefore, the tree can become quite large, which makes it very difficult to read and use.

The same goes for a singular drop-down list with both categories and subcategories (indented).

constraints

  • Exactly a category and a subcategory can and should be selected.
  • The hierarchy is limited in depth as described. There are no sub-subcategories.
  • The categories are unique.
  • The subcategories are unique in their category, but not globally (there might be a subcategory of the same name in another category).
  • No constraint on the number of categories and the number of subcategories.

The goal

It is easier and more convenient for the user to select a category and a subcategory. Especially if the user is unsure of the required (sub) category, it would be very helpful to have an overview of what is available.

Is there something missing? There has to be a smart way to do it. Or is our current solution already the most feasible option? Any contribution is greatly appreciated!

usability – What is the difference between the context menu, the drop-down menu and the drop-down menu?

With user interface design terms like these, there can be many popular terms for the same. Businesses will voluntarily use unique terminology for commercial and legal reasons. People will abuse the terminology because it is technical. The menu is certainly a technical word, but these terms are not.

These are very generic terms. For example, each menu that expands vertically is a drop-down list. Material design guidelines rarely use the term drop-down list. The drop-down menus are simply called menus: https://material.io/guidelines/components/menus.html#menus-simple-menus

Refer to current design guidelines to find or validate user interface terminology. The terminology used by the design guidelines is itself designed by designers and developers working together.

In general, there are two types of menus in the user interface. The first type of menu is a list of commands. Commands make the app do something. This is the original basic programming user interface. The second type of menu is only a selection tool. The menu has only one command and the menu items are just options for that command. A navigation menu is this type of menu.

There are differences between the terms you ask for. The drop-down menu is a desktop design. The Popover menu is a tactile design. The flyout menu is a submenu of the desktop drop-down menu.

The drop down menu is the original description given to the expanding text menus on the desktop. The drop-down list refers to the visual effect of opening the menu. So all drop down menus but the term is generally used for keyboard and mouse (desktop) menus as opposed to touch menus.

Popover refers to the visual effect of the menu appearing above everything visually. So all the menus appear. The term is used for touch menus.

Fly-out refers to the horizontal opening as opposed to the vertical. The term is used for the desktop drop-down submenus. Fly-outs are drop-down lists.

Here are examples of dropdown and popover of Google's material design guidelines and Apple's human interaction guidelines for Mac OS and iOS. Also shows how Apple uses "popup" for their Mac OS as opposed to "popover".

enter description of image here

Is there a design template for drop-down lists in iOS?

Even though Apple has recommended (and surprisingly still recommends) selectors for drop-down lists, they don't even use it anymore. spoilers:

enter description of image here

enter description of image here

In either case, "logic" would dictate using a drop-down menu + selector. Apple has chosen a much better solution for its own applications.

However, a whole screen to choose between "Woman" or "Man" (forgive the binary example) seems exaggerated. Personally, I think the best option is to design what looks visually like a drop-down list item which, when pressed, opens an action sheet:

enter description of image here

The reasoning is that an action sheet is better than a selector because:

1) Action sheets do not require scrolling to read and / or choose options that are not highlighted;

2) The action sheets soften the background, accessibility that by clicking outside the action sheet, the other elements will not be activated (while a selector makes the user uncertain of where tap to close the selector without accidentally touching anything else);

3) The action sheets have "Cancel" buttons;

4) The elements of the action sheets have a height of 44 points, have margins between the buttons and can list more options using more space on the screen;

The action sheets are also better than the full screen listed beforehand, as they do not lead the user to another screen, which makes the flow more … fluid; and they are better than a tailor-made alternative as they are native and therefore "more time-tested". Brad Frost would probably correct me, saying that they are actually "looking to the future".

By the way, Luke Wroblewski has a great article on why dropdowns should be the user interface of last resort, and these 4 very great videos explaining in detail when and why one item works better than the other (and with searches to save it)):

• Luke Wroblewski Part 1 – Conversions @ Google 2014

• Luke Wroblewski Part 2 – Conversions @ Google 2014

• Luke Wroblewski – Mobile Design Essentials Part 1 – Conversions @ Google 2015

• Luke Wroblewski – Mobile Design Essentials Part 2 – Conversions @ Google 2015

Put on your headphones and dive. The videos are worth it.

css – How do I create a drop-down menu with a top margin (or just a space)? Mouse cannot keep dynamics active

I want to create a vertical space between my parent menu and its drop-down menu, but if I give it a higher margin, the mouse cannot hover over the menu and keep it actively displayed.

Here is my code for the menu:

#primary-menu{
    float: right;
    margin-bottom: 30px;
}

.main-navigation ul ul{
    text-align: right;
    float: right;
    margin-left: -200px;
    margin-top: 10px;
}


.main-navigation ul ul a{
    text-align: right;
}

.sub-menu{
    margin-top: 10px;
    width: 230px;
    background-color: black;
}

I use underlines as the theme.
The only other thing I added is the right alignment.

Another solution than the top margin could be interesting.
I thought of inserting an item at the top of the submenu list item as a fill using something like:

.sub-menu li:first-of-type::before{
    content:"filler";
    background-color: transparent;
}

But I don't know how to control the height or make this element transparent.

worksheet function – dependent drop-down list in MS Excel

I have attached a screenshot-image-clip of the Excel sheet here

I have a table. I have three columns, 1-Business, 2-Product, 3-Zoned. the data is not sorted and duplicate values ​​are also present.

Then below the table, I do work … I can use cell validation but it does not give what I want. me too do not I want to order / organize the data … I want the results below without rearranging or touching the table

When i call C13, it should only show the unique Business.

Then the drop-down list of Product in the cell C14 should filter based on the Business.

After that, when I click in the cell C15, it should give a filtered drop-down list of Zoned based on Business and Product.

In my example, the cell C15 the drop-down list should only display 123 and 456.

How to load Localstorage values ​​in dynamically loaded dependent drop-down lists?

I'm sure there is an answer, but I'm completely confused and don't know who to turn to. I can't find any answer that works on the web. I have multiple selection groups / dropdown options dependent (three per group) which are loaded via ajax from a server. The first drop-down list in each group works. But the second and third do not. I have TWO (2) problems. The first problem is that I cannot retrieve the values ​​in localstorage to reload them in the perspective drop-down list after refreshing the page. The second problem is that the value stored in localstorage is not the correct value that was actually selected from the drop-down list. It appears that local storage stores the last value in the drop-down list or the first value in the drop-down list. Local storage in the second drop-down list always stores the last value and the third drop-down list always stores the first value.
local storage values ​​are present but will not be loaded in the drop-down menu

I would appreciate any help you could give me on this problem and on writing code in general. The call jquery and ajax is as follows;

    $(document).ready(function () {
$('.country').on('change', function () {
    var countryId = $(this).val();            
    var state_select = $(this).closest('form').find('.state');
    var city_select = $(this).closest('form').find('.city');            

    if (countryId) {
        $.ajax({
            type: 'POST',
            dataType: 'json', 
            url: 'ajaxData.php',
            data: {
                country_id: countryId
            },
            success: function (r) {
                console.log('States', r);                        

                if (r.status) {
                    r.data.forEach(function (state) {
                        $(state_select).append(``);                  

                        $('.state').each(function(r) {
                            var stateList = $(state);
                            var thisSelection = $(this);
                            var thisId = thisSelection.attr('id');
                            var storageId = 'state-' + thisId;
                            var storedInfo = localStorage.getItem(storageId);



                            thisSelection.on('change', function(e) {                                    
                                var selectedOptions = ();
                                thisSelection.find(':selected').each(function(i) {
                                    var thisOption = $(this);
                                    selectedOptions.push(thisOption.val());
                                });
                                localStorage.setItem(storageId, (state.name));

                            });
                        });                                
                    });

                } else {                            
                    $(state_select).html('');
                    $(city_select).html('');
                }

            }
        })
    };
}); 
$('.state').on('change', function () {
    var stateId = $(this).val();            
    var city_select = $(this).closest('form').find('.city');

    if (stateId) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'ajaxData.php',
            data: {
                state_id: stateId
            },
            success: function (r) {
                console.log('Cities', r);

                if (r.status) {
                    r.data.forEach(function (city) {
                        $(city_select).append(``);                    

                        $('.city').each(function(i) {
                            var stateList = $(city);
                            var thisSelection = $(this);
                            var thisId = thisSelection.attr('id');
                            var storageId = 'city-' + thisId;
                            var storedInfo = localStorage.getItem(storageId);


                            thisSelection.on('change', function(e) {                                    
                                var selectedOptions = ();
                                thisSelection.find(':selected').each(function(i) {
                                    var thisOption = $(this);
                                    selectedOptions.push(thisOption.val());
                                });
                                localStorage.setItem(storageId, (city.name));
                            });
                        });                                
                    });
                } else {                            
                    $(city_select).html('');
                }
            }
        })
    };                       
});   
});          

The HTML markup is as follows;

 

Please help. THX

functions – Select the default value from the woocommerce drop-down list (widget_product_search)

I was looking for an answer online, but I couldn't find what I needed for this little fix.

I am using a search bar for compare-tech.fr (home page and header).
The search bar has a drop down category and I would like to choose the default category.

I tried this:

function wp_dropdown_categories( $args = '' ) {
    $defaults = array(
        'selected'          => 1,
    );

It did not work. I am fairly new in using the functions ..

Thank you for your help 🙂

accessibility – Are the foldable navigation sidebar and Dropstrap Dropdown similar?

It is a control panel for administrators. The foldable sidebar you see below contains links to other pages related to administration.

animated gif showing keyboard navigation order

This image shows me navigating with the TAB key, demonstrating that the TAB order is not messed up. The button is just before the folding sidebar.

When the foldable target item is transferred in or out of the screen, it is made visible or hidden with the display property. This means that the navigation links are only accessible by using the toggle button, the keyboard or the pointer. It is very similar to the Collapse component of Bootstrap, but it is my code.

It also toggles the value of aria-expanded. L & # 39; attribute aria-controls points to the target foldable item.

So far so good, right? But I thought … is this menu not the same type as the Bootstrap drop-down menu you see in the upper right corner?

  1. Both switch the display of something.
  2. Both bring up something on the screen.
  3. The two toggles are buttons. They execute JavaScript when they are enabled. It's not like a list of links that is always accessible by keyboard and that slides in view when you hover over an item.

The Bootstrap Dropdown component, in addition to what my menu also implements, uses the attribute aria-haspopup and provides keyboard navigation between menu items using the arrow keys. The ESC key closes it. Finally, when the focus leaves the toggle or the context menu, it is reduced / closed.

So the question is, should I operate my navigation menu the same way as the Bootstrap Dropdown component, applying all of its accessibility features?

magento2 – How can I add a product by drop-down list in a grouped product for a list of child products in admin

magento provides the product per page function for the general list of products in admin.

and for the list of bundled products, magento provides a page switch.
enter description of image here

but I want to add a drop down list to the group product page like this.
enter description of image here

is there a solution by changing code or anything else.

forms – Use online table modification or multiple lines of drop-down lists?

What is the preferred approach when the goal of a page is that a user changes certain values ​​by more than one combination? Online editing in a table or several rows made up of drop-down lists and entries? The two approaches visualized:

enter description of image here

enter description of image here

Specifically for the table approach, I found here a great working example that will facilitate interaction with the table.

Also note that not all values ​​must be filled.