Hi Friends 👋,

Welcome To Infinitbility! ❤️

Create a dropdown in node-red

To create dropdown ( select ) in node-red, use node red typedInput() function it will create dropdown list based on provided options by you.

<label for="node-input-domain"><i class="fa fa-tag"></i>Domain</label>
<input type="text" id="node-input-domain" /><br/><br/>
let options = [
            { value: "infinitbility.com", label: "infinitbility.com"},
            { value: "aguidehub.com", label: "aguidehub.com"},
            { value: "sortoutcode.com", label: "sortoutcode.com"},
        ];

$("#node-input-domain").typedInput({type:"domain", types:[{
    value: "domain",
    options:options
}]})

Create a dropdown in node-red with multiple select options

To create multiple values select dropdown in node-red, pass the multiple: true option in node-red typedInput API it will enable multiple selections of dropdown value.

<label for="node-input-domains"><i class="fa fa-tag"></i>Domains</label>
<input type="text" id="node-input-domains" />
let options = [
        { value: "infinitbility.com", label: "infinitbility.com"},
        { value: "aguidehub.com", label: "aguidehub.com"},
        { value: "sortoutcode.com", label: "sortoutcode.com"},
    ];
    
$("#node-input-domains").typedInput({type:"domains", types:[{
    value: "domains",
    multiple: true,
    options:options
}]})

node-red dropdown node example

Here, we are going to create our own custom node for the dropdown example.

Want to know the steps to create a node in nodes?

How to create multiple nodes in the node-red single module?

I’m not going to explain step by step process of creating or installing nodes in node-red but if want to know best practices read the above-mentioned article.

Let’s create a node…

node-red-dropdown-example/index.html

<script type="text/html" data-template-name="dropdown">
  <div class="form-row">
    <label for="node-input-domain"><i class="fa fa-tag"></i>Domain</label>
    <input type="text" id="node-input-domain" /><br/><br/>
    <label for="node-input-domains"><i class="fa fa-tag"></i>Domains</label>
    <input type="text" id="node-input-domains" />
  </div>
</script>

<script type="text/html" data-help-name="dropdown">
  <p>
    A simple node that converts the message payloads into all dropdown
    characters
  </p>
</script>

<script type="text/javascript">
  RED.nodes.registerType('dropdown',{
      category: 'Toolkit',
      color: '#a6bbcf',
      defaults: {
          name: {value:""},
          domain: {value:""},
          domains: {value:""},
      },
      inputs:1,
      outputs:1,
      icon: "file.png",
      label: function() {
          return this.name||"dropdown";
      },
      oneditprepare: function() {

          let options = [
                  { value: "infinitbility.com", label: "infinitbility.com"},
                  { value: "aguidehub.com", label: "aguidehub.com"},
                  { value: "sortoutcode.com", label: "sortoutcode.com"},
              ];

          $("#node-input-domain").typedInput({type:"domain", types:[{
              value: "domain",
              options:options
          }]})

          $("#node-input-domains").typedInput({type:"domains", types:[{
              value: "domains",
              multiple: true,
              options:options
          }]})
      }

  });
</script>

node-red-dropdown-example/index.js

module.exports = function(RED) {
    function DropdownNode(config) {
        RED.nodes.createNode(this,config);
        var node = this;
        node.on('input', function(msg) {
            let obj = {domain: config.domain, domains: config.domains};
            msg.payload = obj;
            node.send(msg);
        });
    }
    RED.nodes.registerType("dropdown",DropdownNode);
}

Let’s check the output of HTML file of the node

Node-red, dropdown example
Node-red, dropdown example

I have selected some values from both dropdowns and let test them in node-red flow and check the output in debugging.

Node-red, dropdown debug example
Node-red, dropdown debug example

node-red-dropdown-example Github Repo

multi-node-example node-red Github Repo

Create custom node in node-red

I hope it helps you, All the best 👍.