Good afternoon class! Such a simple thing but I couldn’t do it:
How to replace value (text) of selected option from a dropdownlist. Thanks.
const selectElement = document.querySelector("#my-select");
selectElement.value = "HTML";
Please clarify if you want to replace the text of the specific option (which doesn’t really make sense usually) or if you want to change the selection to a different option from the list
1 Like
Replace the selected item’s text. Obviously this will be done through sp-textfield
What I already do in extendScript I intend to do with UXP, this is just the beginning
Could you provide minimal code sample to reproduce the issue? I think this could be approached multiple ways, but it depends on your HTML structure I believe
@Karmalakas It’s nothing more than a dialog window where I’m going to manage an array that will possibly be an array of objects “I STILL DON’T KNOW HOW I’M GOING TO DO THIS, IT’S THE BIGGEST CHALLENGE”; containing presets that will be loaded in a list, like dropdowlist and that from item 7, each preset item that is selected, will be modified when requested by buttons that add, remove, edit or tighten the list leaving only the native items (the first 6).
This I already do with my CEP panel and extendScript. UXP is a challenge to do such a feat, but I’m studying.
Please understand, that in order to try to help you in this case, someone would need to see what you already have exactly, to figure out where the issue is. If the issue is not that obvious, one might try to run the script and play with it to make it work. Sorry, but without seeing what’s this particular part of your code is, I’m very doubtful someone will be able to help. Or it would be some very lucky guess if some suggestion would actually solve the problem. I personally am not ready to make any guesses at this point
So if you don’t have any code yet and want someone to provide a full working solution, this might take a while - probably much longer than you tried yourself and then asked if it didn’t work
Okay, if video 2 is not enough to show the code, what else do you want me to show?
html
<form> <select id="list_MD" size="8" style="width: 200px; transform: translate(5px, -30px)"> </select></form>
js
var select = document.getElementById("list_MD");
var conteudo = ["Selecione", "Alumínio", "Choop", "Toda Preta", "Toda Branca", "Dupla"];
function itensArray() {
for (var i = 0; i < conteudo.length; i++) {
var optn = conteudo[i];
var el = document.createElement("option");
el.textContent = optn;
select.appendChild(el);
}
}
window.addEventListener("load", itensArray);
This removes the selected item
select.removeChild(select.options[item]);
I just need something maybe similar to this:
select.replaceChild(select.options[item]).value = "New text";
I’ve thought about removing and creating another item, but it is always added at the end of the list and completely deviates from the original index order.
Sorry, but with your sample code, dropdown is not even populated.
Please help us help you. At least try to make select render with options in UXP. Currently you’re asking how to fix something, but the issue is not even there. It seems like you’re assuming there’s going to be an issue and already asking for a solution.
Here are the docs on how select (aka dropdown, aka picker) works in UXP. Here’s how I use it.
From the code pieces provided in your last post, I can assume where the issue is, but you won’t be able to test it until you have picker working. You’re changing only value of the option, and you need to change both value and text
OK, if that’s enough, here’s my very simplified code with a very readable UPX language:
html:
<sp-dropdown placeholder="Make a selection..." style="width: 200px">
<sp-menu slot="options" id="select" size="s">
<sp-menu-item> Option A </sp-menu-item>
<sp-menu-item> Option B </sp-menu-item>
<sp-menu-item> Option C </sp-menu-item>
</sp-menu>
</sp-dropdown>
<sp-textfield id="textfield" placeholder="Add a new name" style="width: 200px">New name</sp-textfield>
<sp-action-button id="btn_adn" style="width: 200px">Add New Item</sp-action-button>
<sp-action-button id="btn_rep" style="width: 200px">Replace item text</sp-action-button>
js
document.querySelector("#btn_adn").addEventListener( "click", async evt => {
nomePreset = document.getElementById("textfield").value
document.getElementById("select").insertAdjacentHTML("beforeend", `<sp-menu-item>${nomePreset}</sp-menu-item>`);
});
document.querySelector("#btn_rep").addEventListener( "click", async evt => {
nomePreset = document.getElementById("textfield").value
//////?????
});
Base example:
MYEXAMPLE_PS.ccx (5.6 KB)
I guess we’re out of luck
In the video below you will see how changing an option from console works, but exact same command does not change it when ran from script. I didn’t actually try to install a plugin TBH. But in any case, I couldn’t make the new value appear as a selected option without re-selecting it manually
I guess it’s a UXP bug/limitation
Also gave a quick try of de-select and then select again, but no luck
nomePreset = document.getElementById("textfield").value
select = document.getElementById("select")
console.log((select.options[ select.selectedIndex ]), nomePreset )
(select.options[ select.selectedIndex ]).innerHTML = nomePreset
index = select.selectedIndex
select.selectedIndex = -1
select.selectedIndex = index
2 Likes
Unfortunate!
Good guy! UXP plugins are very interesting but limited, there is a lot to fix, I still prefer to work with extendScript “scriptUI” with CEP extensions.
See how simple it would be to do this with jsx:
list_MD.selection.text = textfield.text;
Hope these bugs can be fixed as soon as possible.
Perhaps an alternative to my problem would be to get the index of the selected item, remove it, add a new one and try to move it to the position of the index obtained previously, but I don’t know if it would be possible to move items from positions.
@Karmalakas thank you for your effort in trying to solve my problem. Strong hug.