# Show select option text as label

**URL:** <https://discourse.nodered.org/t/show-select-option-text-as-label/5130>\
**Category:** Developing Nodes\
**Created:** [22 November 2018 23:46 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130 "2018-11-22T23:46:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2018 23:46 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/1 "2018-11-22T23:46:06Z")

</div>

Hi folks,

The config screen of my custom node contains a dropdown:

```auto
<script type="text/x-red" data-template-name="math">
    <div class="form-row">
        <label for="node-input-operation"><i class="fa fa-calculator"></i> Operation</label>
        <select id="node-input-operation">
            <option value="value1">Some value</option>
            <option value="value2">Another value</option>
        </select>
    </div>
</script>

```

Depending on which value has been selected, I would like to show automatically the selected option **TEXT** as node label:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/658c852d7214b1e99cd632b829e2638a29a63a47.png)

So I don't want to show the selected option **VALUE** :  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/ae768e3b3c56f625de2074b98eb6a8c5037a1e8a.png)

Tried to accomplish that this way:

```auto
<script type="text/javascript">
    RED.nodes.registerType('math', {
        ...
        label: function() {
            var operationText = $("#node-input-operation option[value='" + this.operation + "']").text();
            return this.name || operationText || "Mathematics";
        },
        ...
    });
</script>

```

However I get no option text:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d622a6d408d0d2e2a1c58dbf2de1caa3089bf338.png)

Does anybody have a clue how to solve this, or a another node that does a similar thing?

Thanks !  
Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 November 2018 07:34 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/2 "2018-11-23T07:34:14Z")

</div>

I think the [Inject node](https://github.com/node-red/node-red/blob/master/nodes/core/core/20-inject.html) could be my starting point. Will have to figure out this evening how it works over there...

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [23 November 2018 18:31 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/3 "2018-11-23T18:31:49Z")

</div>

@BartButenaers, it's interesting that you mention the `inject` node here. Its .html file could be a gold mine for beginning developers of contributed nodes, and it would be a great contribution if you or another NR guru could go through that file line by line and do a tutorial on how it does its magic. I've looked at it several times but always gotten lost before I could escape with anything useful.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 November 2018 20:00 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/4 "2018-11-23T20:00:34Z")

</div>

Hi Mike,

To be honest I have learned creating custom nodes by looking at the code of existing nodes. But indeed reading a step by step tutorial would have been easier. I haven't looked yet, but hasn't somebody meanwhile written some kind of developer guide for Node-RED already ??

About my issue. Don't think (?) the inject node can help me out.  
But I think I'm already there. I'm unfamiliar with this kind of stuff, but I ' **_think_**' it works like this:

1. The html part of the (custom) node is defined as an **html template** inside a `<script>` tag
2. Since the script has a mime type `type="text/x-red"` unknown to the browser, it will _ **not** _ be loaded automatically in the DOM tree. Otherwise all config screens (from all installed nodes) would be visualized on top of each other, resulting in a complete mess.
3. As soon as the node is double clicked, the html template content will be loaded (by Node-RED somewhere) in the browser's DOM tree.
4. As a result, the node's config screen is visualised.

I might be mistaken by this, but when I execute this command in the 'Label' function:

```auto
$("script[data-template-name='math']")[0]

```

This way I search for a `<script>` tag with attribute `data-template-name` is equal to `'math'`.  
Then indeed the **html content** of my 'math' html template is displayed in my debugger:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7002e866dab39c1456fc45412f1a5d10d2822efc.png)

Now I just need to get access to the list of available **options** from the `<select>` tag. But not quite sure I should load this into a temporary DOM tree or another way ...

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 November 2018 20:33 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/5 "2018-11-23T20:33:02Z")

</div>

Why not just have a lookup object with the value to label pairs inside the label function? Mucking around with the Dom is needlessly complicated for what you're trying to do.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 November 2018 20:46 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/6 "2018-11-23T20:46:25Z")

</div>

Hey Nick,

I would like to maintain the value/description pairs only _ **once** _ (in html **or** in javascript). Therefore I wanted to search - from inside the Javascript functions - the descriptions that were defined in the html.

Do you mean I have to do it the other way around? I.e. create a map of key-value pairs in a Javascript variable, and afterwards (in oneditprepare) fill the html select options dynamically with the contents of that map?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 November 2018 20:59 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/7 "2018-11-23T20:59:05Z")

</div>

> [@BartButenaers](#):
>
> create a map of key-value pairs in a Javascript variable, and afterwards (in oneditprepare) fill the html select options dynamically with the contents of that map?

That's what the switch node does. [node-red/nodes/core/logic/10-switch.html at 2f93bb969bd1a2130b942caedb098f303870d012 · node-red/node-red · GitHub](https://github.com/node-red/node-red/blob/2f93bb969bd1a2130b942caedb098f303870d012/nodes/core/logic/10-switch.html#L81)

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [23 November 2018 22:26 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/8 "2018-11-23T22:26:52Z")

</div>

Hi Bart,

> [@BartButenaers](#):
>
> To be honest I have learned creating custom nodes by looking at the code of existing nodes.

I've done pretty much the same thing. Some of the simpler nodes have taught me the basics, but it's been hard to find examples that help me learn more.

> [@BartButenaers](#):
>
> But indeed reading a step by step tutorial would have been easier. I haven't looked yet, but hasn't somebody meanwhile written some kind of developer guide for Node-RED already ??

The NR [documentation](https://nodered.org/docs/creating-nodes/) and [Coursera videos](https://www.coursera.org/learn/developer-nodered/home/welcome) are a great start. I wasn't looking for a node creation tutorial as much as a guide to using html/css effectively in the node edit dialog. I think I will just study some of core nodes with the [W3schools tutorials](https://www.w3schools.com) at my side and pull myself up by the bootstraps.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 November 2018 23:11 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/9 "2018-11-23T23:11:46Z")

</div>

Mike,

Based on Nick's tip, it now seems to work fine...

Awaiting the printing company releasing my latest book "_Developing Node-RED nodes for dummies_", here is how this particular issue can be solved:

1. Create an empty 'select' tag (without options):

```auto
<script type="text/x-red" data-template-name="math">
   <div class="form-row">
     <label for="node-input-userValue"><i class="fa fa-calculator"></i> Value</label>
     <select id="node-input-userValue">
     </select>
   </div>
</script>

```

2. Create a (Javascript) variable containing an array with all value/description pairs:

```auto
<script type="text/javascript">
   var values = [
     {v:"value1", t:"Some value"},
     {v:"value2", t:"Another value"},
   ];
</script>

```

3. As soon as a value is selected in the dropdown, the selected value needs to be stored in the node:

```auto
defaults: {
    userValue: {value: ""}
},

```

4. As soon as the config screen is opened, the value/description pairs are dynamically added to that 'select' tag (as 'option' tags):

```auto
oneditprepare: function() {             
    for (var i = 0; i < values.length; i++) {
       var value = values[i].v;
       var text = values[i].t;
       $('#node-input-userValue').append($("<option></option>").attr("value", value).text(text));
    }
         
    // Make sure the selected value is also selected in the <select> tag
    $('#node-input-userValue').val(this.userValue);
}

```

5. When the label is determined, we get the value description from that SAME array:

```auto
label: function() {
   var valueText = "";
         
   for (var i = 0; i < values.length; i++) {
       if (values[i].v === this.userValue) {
           valueText = values[i].t;
           break;
       }
    }

    return this.name || valueText || "Mathematics";
},

```

Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 November 2018 15:09 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/10 "2018-11-24T15:09:17Z")

</div>

Just a quick demo, to show how such a dynamic label can provide useful information to a user.  
I have now published version 0.0.5 of node-red-contrib-msg-router to show the _router type_ in the label:

![router_label](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/442bf267aae329015d12d70209927cc25faec13a.gif)

Of course it is useles to reflect the content of every dropdown (on your config screen) in the node label.  
But in this case, the _dropdown content really changes the behaviour of the node_...

---

<div class="post-metadata">

**Author:** ![bugs181](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bugs181/32/4100_2.png) [@bugs181](https://discourse.nodered.org/u/bugs181)\
**Post date:** [29 November 2018 18:22 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/11 "2018-11-29T18:22:55Z")

</div>

Wow! Great work. That sure looks nifty. Was needing to do something like this myself. If I could make a request, it would be to upload a barebones example project with this so new users can learn from it; rather than going through and picking out pieces of code from other nodes.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [29 November 2018 18:51 UTC](https://discourse.nodered.org/t/show-select-option-text-as-label/5130/12 "2018-11-29T18:51:06Z")

</div>

I'd love to see the official docs improved, so if anyone want to funnel efforts in that direction rather than creating material outside of [nodered.org](http://nodered.org), that would be great.