How to show the previously selected values(dynamic

I'm having a custom node which includes two dropdowns which are independent to each other.

So the second dropdown values changes, according to the selected value from the first drop down.

What I've tried now is:

User drags my custom node (iotinput) choses values from both the drop downs and clicks the Done.
He drags another custom node (iotinput) again, and select different values and clicks Done.
So there're two custom nodes at the moment.
So when the user goes back and click in either one of those nodes, it should show the previously selected values which I'm unable to do at the moment.
So how much custom nodes he's dragging into the flow, the user should be able to see the previously selected values after clicking Done.

NOTE: All the above I'm doing it without deploying the flow.

The problem I'm facing here is, since I'm loading my dropdowns from an ajax call, I'm unable to load the previously selected values.

I've checked the in-built nodes in Node-Red which has dropdowns, where the options values are hard coded. I was able to do it for a textbox successfully.

But then I'm clueless, how could I do it for dropdowns which are getting created dynamically? Is there anyway in Node-Red to do it?

Thanks!

In a node's oneditprepare function you have access to its current configuration. This means that once you've dynamically added to the contents to the select boxes, you can set the selected value based on the node property.

For example, if a node has a property colour, you can do:

oneditprepare: function() {
    var node = this;

    $.ajax({
        url: 'http://example.com/colours.json'
        success: function(result) {
            // ... do whatever you need to build you select box
            // then set the current value:
            $('#mySelectBox').val(node.colour);
        }
    })
}