FRjs/forms: Colour Dropdowns

The FRjs/forms module creates several extensions to the <select> tag/HTMLSelectElement class which let you place self-populating dropdowns in your HTML markup, or easily create them in Javascript.

For basic setup of the module, see FRjs/forms: Getting Started.

This tutorial covers how to use the Automatic Colour Dropdowns. A dropdown of this type automatically populates itself with options representing Flight Rising's colours, in on-site colour wheel order. The options will be styled similarly to how they are on-site, with coloured backgrounds.

Basic Usage

After loading the FRjs/forms module, there are two methods for creating a colour dropdown.

In HTML

To create a <select> that uses this functionality in your HTML files, just add the attribute is="fr-colours" to the element:

<select is="fr-colours"></select>

In Javascript

To create a <select> that uses this functionality in a script:

  1. Create a select element with document.createElement() and set the is option to fr-colours.
  2. Use .setAttribute() to set any of the standard and custom attributes you need. Add any options you want to have in addition to the colours.
  3. Attach it to the document.
const colourDropdown = document.createElement("select", { is: "fr-colours" });
document.body.append(colourDropdown);

When working with any of these custom dropdowns in javascript, be aware that they'll only self-populate after two things have happened:

  1. The element is attached to the document.
  2. The FRjs/forms module has run.

If you need to access the self-populated options in your code, you must either wait until the DOMContentLoaded event has fired, or do so in a script which **statically** imports FRjs/forms.

Custom Attributes

In addition to all standard attributes available for <select> elements, colour dropdowns support the following custom attributes:

AttributeTypeValue If UnsetDescription
no-opt-coloursbooleann/aIf this attribute is present, options will be unstyled. If this attribute is omitted, options will be styled with background colours matching their colour name.

Examples

HTML

Create a colour dropdown with coloured options, and a default value of "Pick a colour":

<select is="fr-colours">
	<option>Pick a colour</option>
</select>

Create two colour dropdowns with NO option styling:

<select is="fr-colours" no-opt-colours></select>
<select is="fr-colours" no-opt-colours="no-opt-colours"></select>

Javascript

Create a colour dropdown with NO option styling:

const colourDropdown = document.createElement("select", { is: "fr-colours" });
colourDropdown.setAttribute("no-opt-colours");
document.body.append(colourDropdown);