Admin Library | Location Menu Demos

These two dependent select menu examples are different from the shipping location select menu on the example cart page as the data on the page should only be updated when the 'Update' button is pressed, rather than the method used on the shopping cart that uses ajax to reload the page when a shipping option is changed.

The two methods listed here have advantages over each other, the 'tiered' example is easier to read, but requires JavaScript and more page space, the 'inline' example does not require JavaScript and is smaller in size, but at the cost of readability.

This demo includes some example JavaScript functions to help with the functionality of the 'tiered' menu method.

  • Tiered Location Menus - JavaScript Required
    To demonstrate the tier functionality, select 'Australia' or 'United States' as the country.
  • This method requires that a multi-dimensional array of location types ('Country', 'States'), and location names ('United Kingdom', 'New York' etc.) are looped through and rendered as html select menus, this array is generated using flexi carts 'locations_tiered()' function.

    The select menus must all have a unique id that the JavaScript can reference them by. This example uses a combination of the current '$location_type' and a row id, the functions 'strtolower()' and 'url_title()' are then used to format the id, removing unwanted characters and lowering the case.

    Then for each location option, a class of 'parent_id_#' is set stating the current locations parent id, if is the top level parent, its class is 'parent_id_0'. This then allows JavaScript to relate child locations with parent locations. This relationship can continue for infinite generations (Location types).

    Example: Menu 'A' has an option selected with a value of '3', JavaScript will then update menu 'B' with only options that have a class of 'parent_id_3'.

  • Inline Location Menu
  • This is an example of how to display the location data inline via one select menu, rather than across multiple select menus.

    This method does not require any JavaScript and is ideal if space is limited, however, it can be harder to read and can grow in length very quickly - especially if many location types and locations are listed.