Create a Dropdown Select with Dominator.js
Working with 'dropdown select' requires data, either fetched from a database or stored locally.
Example Usage:
1. Creating a select element and appending it to section.example-output
// Define an array of country data
const data = [
{ id: 1, countryname: 'Democratic Republic Of Congo' },
{ id: 2, countryname: 'Rwanda' },
{ id: 3, countryname: 'Burundi' },
{ id: 4, countryname: 'Uganda' },
{ id: 5, countryname: 'Kenya' },
{ id: 6, countryname: 'Tanzania' }
];
// Define a placeholder option that will appear at the top of the dropdown
const beforedata = [
{ id: '', countryname: 'Select country' }
];
// Use Dominator.js to create a dropdown and configure its behavior
D$({
element: 'select', // Specifies the element to create (dropdown)
options: {
beforedata, // Adds the "Select country" option at the beginning
data, // Populates the dropdown with country options
id: 'id', // Uses the `id` field for option values
output: 'countryname' // Uses the `countryname` field for option labels
},
css: {
padding: '5px', // Adds padding inside the dropdown
borderRadius: '5px', // Rounds the dropdown corners
width: '100%' // Makes the dropdown expand to full width
},
on: {
type: 'change', // Defines an event listener for when the selection changes
callback: ({ e }) => {
const value = e.target.value; // Gets the selected value (country ID)
const countryName = D$(`option[value="${value}"]`).text(); // Gets the selected country name
alert(`You've selected the country ${countryName} with the ID: ${value}`); // Shows an alert
}
},
appendTo: 'section.example-output' // Appends the dropdown to the section with class "example-output"
});
If you want to create a dropdown in Dominator.js, you should understand the available properties.
The element property defines the HTML tag, in this case, 'select'. The
options property allows you to specify data dynamically.
The beforedata property is used to add a placeholder or default option at the top
of
the dropdown. The data property is an array of objects representing selectable
items.
Each object must contain keys corresponding to id (used as the value) and
output (displayed in the dropdown).
Placeholder Property
The placeholder property is used to define a default option that appears at the top of the dropdown before any selection is made. This placeholder option is generally used to guide users on what to do, like selecting a country or a category.
placeholder: {
value: '', // The value for the placeholder, often set to an empty string.
text: 'Select country' // The visible text shown to the user before any selection is made.
}
- value: This specifies the value assigned to the placeholder option. When the
placeholder is selected, it generally doesn't send any valid data (i.e., the value is often an empty
string).
- text: The visible text displayed to the user before they make a selection. For
example,
"Select country" can appear in the dropdown when no other option is selected.
This property ensures that the dropdown has a clear starting point, improving usability and guiding the user to make a choice.
The css property allows styling of the select element, such as width, padding, and
border radius. The on property defines event listeners. Here, an event listener is
attached to handle the change event, retrieving the selected value and displaying it in
an
alert box.
Finally, the appendTo property specifies where to insert the select element within
the
DOM. In this example, the dropdown is appended to the section.example-output container.
selectedValue Property Explanation
The selectedValue property is used to pre-select an option in the dropdown when the page loads.
In the example below, selectedValue: 1 is set, which means that the option with the value of 1 (the country 'Democratic Republic Of Congo') will be automatically selected when the dropdown is rendered:
selectedValue: 1, // Pre-select the option with id 1 (Democratic Republic Of Congo)
The value of the selectedValue property corresponds to the id of the options in the dropdown. In this case, the option with id: 1 will be pre-selected.
This is particularly useful when you want to set a default or initial selection for the user, such as when editing a profile or pre-filling a form.