Save HTML select tag selection for reload value in config screen

Hi,
in my node I need to store the value of the selected select tag to be able to set the value when I re-open config screen.

Now when I open config display after first configuration, the first value in the list is always displayed.

What would be the best solution to use ?

Thanks,

Nicolò

You store it as a property if the node... Just like you would any value you want to store as part of the node's configuration.

  1. Add a property to your nodes defaults object
  2. Give you select the appropriate id value and the editor will automatically map the node property to the value of the select.

https://nodered.org/docs/creating-nodes/config-nodes#defining-a-config-node

Its a bit more complicated if you are dynamically generating the contents of the select box.

1 Like

Thanks,

I'm generating dynamically the contents of the select tag.
A different box with different ID is enabled based on the value selected in a previous box.

In which case you'll need to explicitly set the selected value in your oneditprepare function after you have populated it.

You will still need to add a property to the node to store the selected value.

This is what I tried (but it doesn't work).
Once selected the correct value I set a variable data in oneditsave.

    oneditsave: function () {
    
         <!--Check wich device type is selected-->
         let deviceType = $("#node-input-device option:selected");
         
                <!--PAC2200-->
                if(deviceType.val() == "pac2200") {
                    
                    let dataValue = $("#node-input-data-pac2200 option:selected");
                    this.data = dataValue.val();
          
                } 

In data I have the value selected in the box. After this in oneditprepare I set previous selected box with the last value of data .

    oneditprepare: function() {
        
        $("#node-input-device").on("change",function() {
            if (this.value === "pac2200") {
                $("#node-input-data-pac2200").show();
                $("#node-input-data-pac1200").hide();
                $("#node-input-data-pac1600").hide();
                $("#node-input-data-pac3100").hide();
                $("#node-input-data-pac3120").hide();
                $("#node-input-data-pac3220").hide();
                $("#node-input-data-pac3200T").hide();
                $("#node-input-data-pac4200").hide();
                $("#node-input-data-pac5200").hide();
                $("#node-input-data-sem3").hide();
                $("#node-input-data-atc6300").hide();
                $("#node-input-data-3va").hide();
                $("#node-input-data-powercenter1000").hide();
                
                $('#node-input-data-pac2200').val(this.data);
                
            }

data is declared in defaults object

RED.nodes.registerType('measure',{
        category: 'sentron',
        color: '#009999',
        defaults: {
            name: {value:""},
            unitId: {value: "1",required:true},
            device: {value: "pac1200",required:true},
            data: {value: "", required: true}
        },
        inputs:1,
        outputs:1,
        icon: "serial.png",
        label: function() {
            return this.name||"measure";
        }

Thanks

At this point of your code this is not your node, so this.data is not defined.

At the start of your oneditprepare function, grab the value:

const myData = this.data

You can then use myData inside the change event handler.

Ok, now works!!!!!

Thanks.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.