Dropdown Items Not Populating via JavaScript

Problem: I’m trying to populate a dropdown using JavaScript, but the items aren’t appearing. The script detects the dropdown and displays messages in an errorBox, but when attempting to add items with addItem(), nothing happens.

Has anyone successfully added items to a dropdown dynamically? Are there any known limitations or workarounds?

Here’s a simplified version of my code:

var dropdown = prez.object(“drpTags”);
var errorBox = prez.object(“errorBox”);

if (dropdown) {
errorBox.text(“drpTags found! Attempting to add test items…”);

dropdown.clearItems();
dropdown.addItem("one");
dropdown.addItem("two");
dropdown.addItem("three");

errorBox.text("Test items added successfully!");

} else {
errorBox.text(“ERROR: drpTags NOT found!”);
}

Any advice or alternative approaches would be greatly appreciated!

ActivePresenter version: AP9

OS: Win11Preformatted text

Notes:

Hi,

The dropdown in ActivePresenter does not support an API for adding or removing items. You can try the following script:

function addItem(dropdown, item) {
    dropdown.append(`<option value="${item}">${item}</option>`);
}
var dropdown = $('select', prez.object('drpTags').node);
dropdown.empty();
addItem(dropdown, 'one');
addItem(dropdown, 'two');
addItem(dropdown, 'three');

This method can help add items, but it does not guarantee that the dropdown will work with other features set in the editor. Feel free to try it yourself.

Regards,

1 Like

Thank you! This works perfectly for me!

1 Like