Programmatically set a default value in the sp-dropdown

Is it possible to programmatically set a default value in the sp-dropdown menu?

I tried:

document.getElementById("dropdownFILETYPE").value = "psd";

where “dropdownFILETYPE” is the id in my sp-dropdown tag:

<sp-dropdown id="dropdownFILETYPE" style="position: absolute; left: 8px; width: 107px;">

and “psd” is a value in one of the sp-menu-item tags:

<sp-menu-item value="psd">psd</sp-menu-item>

And that didn’t work.

Can’t test it right now, but maybe setAttribute works

Thanks for the suggestion, @simonhenke .

I’ve not used that, but tried the following lines, but none were unsuccessful.

document.getElementById("dropdownFILETYPE").setAttribute("value", "psd");
document.getElementById("dropdownFILETYPE").setAttribute("selectedIndex", "psd");
document.getElementById("dropdownFILETYPE").setAttribute("selected", "psd");

This is how I do it. I give each sp-menu-item an ID. Then you can set the ID to be selected in the JS. This works for my plugins.

HTML
<sp-menu-item id="psd" value="psd">psd</sp-menu-item>

Javascript
document.getElementById("psd").selected=true;

You can also set the default value in the HTML
<sp-menu-item id="psd" value="psd" selected>psd</sp-menu-item>

1 Like

Thanks, Damon aka @ddbell. That worked perfectly.