UI dropdown - set preselected option

Is it possible to set an option for a dropdown (I mean as default, before the user interaction) ? Would be also possible to put a checkmark to mark the actually selected option, when clicking on the dropdown and showing all possible options?

To preselect an option for the user you could set an inject node to trigger on startup with the payload of the value you wish to set it as.

Yes - as per the info box -

1 Like

Thank you for the information.

Actually my dropdown options look like this:

var dropdownOptions = [{"Option1":"0"}, {"Option2":"1"}, {"Option3":"2"},{"Option4":"3"},{"Option5":"4"}]

Would be possible to see as dropdown options the strings ("Option1", "Option2",...), and to get the as dropdown output the selected option as a number (for instance if "Option3" selected to get the number 2 as output). The default preselected option should also be set by number (for instance 4 for "Option5").

errr yes that is exactly what happens...

[{"id":"e340a2.aae4bf6","type":"inject","z":"db8bd33.4e7c83","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":180,"wires":[["ce922a46.4b6878"]]},{"id":"ed7de142.26c35","type":"ui_dropdown","z":"db8bd33.4e7c83","name":"","label":"","tooltip":"","place":"Select option","group":"f27d9792.709888","order":1,"width":0,"height":0,"passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":550,"y":180,"wires":[[]]},{"id":"ce922a46.4b6878","type":"function","z":"db8bd33.4e7c83","name":"","func":"msg.options = [{\"Option1\":\"0\"}, {\"Option2\":\"1\"}, {\"Option3\":\"2\"},{\"Option4\":\"3\"},{\"Option5\":\"4\"}]\nmsg.payload = 4;\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":180,"wires":[["ed7de142.26c35"]]},{"id":"f27d9792.709888","type":"ui_group","name":"Group 1","tab":"e930e09f.cf58","order":1,"disp":true,"width":6},{"id":"e930e09f.cf58","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":1}]
1 Like

Indeed, thanks!
Is it possible to get in the ui-dropdown output besides the selected value (4) also the corresponding label text ("Option5") ?

that's not the way an html select works... but you know what you set them to so you can hold that information in context if you like and look it up.

I hoped that it is not necessary to use the flow context for that :slightly_smiling_face:...

What about checking if the dropdown selection has changed ? Do I also need to store in a context the last selected option?

You don't have to make the selected value 5 - you could make it "Option4" if you wanted so you would know immediately (or say "4,Option5" and split on comma later... )

well it only gets triggered if it changes.. so up to you.

Ok, thanks.
Can the size of the window with the dropdown options be set?
I would like to increase the number of the visible dropdown options. In my sample I have 7 options and I get only 5 displayed in the dropdown, for the last 2 I have to scroll.

Do i understand correct that it is not possible to show a value before clicking the dropdown box?
I use it for editing some values so a value needs to be loaded as the settings is before changing

you can inject a value to preselect an option if you like.

a now i understand! what a amazing piece is Node red! Really love it! Thanks!