Zach’s ugly mug (his face) Zach Leatherman

Conservative Design Example: Multiple Option List

March 10, 2007

All of the posts in the Conservative Design series so far have been brainstorming of design patterns. But how about some real life examples, some actual code? Let’s dive in.

The first example I decided to tackle was the Option List, specifically the variant that allows multiple options to be selected. Let me start out by saying that I didn’t abstract out the type of source element that you could put into this example, I only programmed the element for a element. For the impatient, let’s just start with the result:

Multiple Option List Real Example Click the image to see the actual example.

[]: http://www.zachleat.com/Projects/valdi/multipleSelectList.html

This element was constructed using the YUI Library and Jack Slocum’s DomQuery selector class, as well as using the new form validation CSS and JavaScript code I’m currently developing entitled ‘Valdi‘.

It includes 3 of the 4 of the minimum features required as set in the original specification.

Features:

  • Validation: there is no submit button, but if there were, it would validate if the form has been entry has a value.
  • Quick Links: Select All, Select None, and Sort the Options
  • Customizable Options: Allow the user to add their own options for selection.
  • Does **not **abstract option types (checkbox, etc)
  • Keyboard Support: CTRL A inside of the select box selects all options, Delete or Backspace removes the selected options, Enter key inside Add input field automatically adds option to the select.
  • Can be easily transformed into a Single Option List by removing the multiple=”multiple” option in the html.
  • Sort will toggle between Ascending and Descending and maintain the selected options
  • When the number of options outweighs the select size, the number of options is displayed next to the Add button. Try adding 5 or more options to the select list.

Screenshots for the Lazy People:

Multiple Options are Added Multiple Option List Real Example

Validation when an Option is not selected: Multiple Option List Real Example

Success, they selected something and submitted: Multiple Option List Real Example

Watch for another separate article about Valdi later on.


< Newer
Conservative Design Example: Hierarchical Options
Older >
Conservative Design: Command Line Interface

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)