How to Add New Items Dynamically in JavaScript DropDownList

Enabling users to add new items directly within the dropdown popup provides a streamlined workflow by eliminating the need to navigate away from the current page. This functionality reduces workflow interruptions and improves productivity in applications.

This article explains how to implement the functionality for adding new items directly within the dropdown menu using the Syncfusion JavaScript DropDownList component.

Use Case

In many real-world applications, users need the flexibility to add new options to a DropDownList without leaving the current page or navigating to a separate form. Common scenarios include:

• E-commerce applications: Users may need to add a new shipping address or payment method while placing an order.
• Form-based applications: When filling out forms, users might need to add a new category, tag, or classification that does not exist in the predefined list.
• Inventory management systems: Users may need to add new product categories, suppliers, or warehouse locations dynamically.
• Project management tools: Team members might need to add new project labels, priority levels, or status options during task creation.
• CRM applications: Sales representatives may need to add new lead sources, industries, or contact types while entering customer information.

Steps to Add New Items Dynamically in DropDownList

Step 1: Initialize the DropDownList Component

Create a new instance of the DropDownList component using the ej.dropdowns.DropDownList class with the following configurations:

// Data source for the DropDownList
var fruitsData = [
    { Name: 'Apple', Code: 'APP' },
    { Name: 'Banana', Code: 'BAN' },
    { Name: 'Orange', Code: 'ORA' },
    { Name: 'Mango', Code: 'MAN' }
];

// Initialize DropDownList
var DropDownListObj = new ej.dropdowns.DropDownList({
    dataSource: fruitsData,
    fields: { text: 'Name', value: 'Code' },
    placeholder: '-- Select an item --',
    popupHeight: '250px'
});
DropDownListObj.appendTo('#fruits');

• The dataSource property is set to fruitsData, which contains the list of items displayed in the dropdown.
• The fields property maps the text and value fields to Name and Code, respectively.
• The placeholder property displays -- Select an item -- to guide the user when no selection is made.
• The popupHeight property is set to 250px to define the maximum height of the dropdown popup.

Step 2: Add Footer Template

Add the footerTemplate property to the DropDownList configuration to include a button labeled “Add new item…” for adding new items dynamically. The footer template appears at the bottom of the dropdown popup, providing a clear and accessible option for users to add new items.

// Initialize DropDownList with footer template
var DropDownListObj = new ej.dropdowns.DropDownList({
    dataSource: fruitsData,
    fields: { text: 'Name', value: 'Code' },
    placeholder: '-- Select an item --',
    popupHeight: '250px',
    footerTemplate: '<div class="add-new-btn">Add new item...</div>'
});
DropDownListObj.appendTo('#fruits');

Step 3: Handle the Open Event

The open event is used to attach a click handler to the footer template button. This event is necessary because the footer template is rendered only when the dropdown popup opens.

open: function () {
    var addBtn = document.querySelector('.add-new-btn');
    if (addBtn) {
        addBtn.onclick = function () {
            var newItem = prompt('Enter new item name:');
            if (newItem) {
                var newCode = newItem.toUpperCase().slice(0, 3);
                fruitsData.push({ Name: newItem, Code: newCode });
                DropDownListObj.dataSource = fruitsData;
                DropDownListObj.dataBind();
            }
        };
    }
}

Within this event:

• A click handler is attached to the button element in the footer template.
• When the user clicks the button, a prompt dialog appears requesting the name of the new item.
• If the user provides valid input, a new item object is created. The Code for the new item is generated by extracting the first three uppercase letters of the item name.
• The new item is added to the fruitsData array, and the DropDownList dataSource property is updated with the modified array.
• The dataBind() method refreshes the component to reflect the changes immediately.

Step 4: Append the DropDownList to the DOM

The DropDownList instance is appended to an HTML element to render it on the web page. Ensure the corresponding HTML element exists in the document:

<input type="text" id="fruits" />

Complete Code Example

// Data source for the DropDownList
var fruitsData = [
    { Name: 'Apple', Code: 'APP' },
    { Name: 'Banana', Code: 'BAN' },
    { Name: 'Orange', Code: 'ORA' },
    { Name: 'Mango', Code: 'MAN' }
];

// Initialize DropDownList
var DropDownListObj = new ej.dropdowns.DropDownList({
    dataSource: fruitsData,
    fields: { text: 'Name', value: 'Code' },
    placeholder: '-- Select an item --',
    popupHeight: '250px',
    footerTemplate: '<div class="add-new-btn">Add new item...</div>',
    open: function () {
        var addBtn = document.querySelector('.add-new-btn');
        if (addBtn) {
            addBtn.onclick = function () {
                var newItem = prompt('Enter new item name:');
                if (newItem) {
                    var newCode = newItem.toUpperCase().slice(0, 3);
                    fruitsData.push({ Name: newItem, Code: newCode });
                    DropDownListObj.dataSource = fruitsData;
                    DropDownListObj.dataBind();
                }
            };
        }
    }
});
DropDownListObj.appendTo('#fruits');

Sample Demonstration

View the complete working sample on StackBlitz

Preview

Additional Resources

For further details and reference, consult the following documentation links:

• Footer Template Documentation
• DropDownList Open Event API

Conclusion

This article demonstrated how to add new items dynamically within the Syncfusion JavaScript DropDownList component using the footer template and open event.

Refer to the JavaScript DropDownList feature tour page to learn about its other features and documentation, as well as how to quickly get started with configuration specifications.

For current customers, check out the components from the License and Downloads page. New users can try the 30-day free trial to explore other controls.

For queries or clarifications, leave a comment in the comments section below. Support is also available through support forums, Direct-Trac, or the feedback portal.