# How to re render a list in select tag in editor

**URL:** <https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576>\
**Category:** Developing Nodes\
**Created:** [12 January 2023 06:50 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576 "2023-01-12T06:50:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![syedhannan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedhannan/32/72932_2.png) [@syedhannan](https://discourse.nodered.org/u/syedhannan)\
**Post date:** [12 January 2023 06:50 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/1 "2023-01-12T06:50:28Z")

</div>

I am fetching a list of files from FTP and displaying it in the typedInput select tag.

So the first time I access the path of FTP I am able to fetch the files and display it in the select tag as well as in the console.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/84367b67b564a3d99e2865450ec282b50b5c90bc.png)

But if I try to access a different path then the list in select tag does not re render even though I am able to get the updated list in the console.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/f/8ffd0562d91f2cd98303d4558433412358c9a096.png)

Here is my code:

```auto
$.getJSON("ftplist", function (data) {
          let ftplist = data;
          console.log("ftp list is ", ftplist);
          if (ftplist.length > 0) {
            $("#node-input-ftplist").val("");
            $("#node-input-ftplist").prop("disabled", false);

            for (let i = 0; i < ftplist.length; i++) {
              let obj = { value: ftplist[i], label: ftplist[i] };
            }

            $("#node-input-ftplist").typedInput({
              type: "ftplist", //is this line required?
              types: [
                {
                  value: "ftplist",
                  options: ftplist,
                },
              ],
            });
          }
        });

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 January 2023 10:47 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/2 "2023-01-12T10:47:06Z")

</div>

You need to use `$(".input").typedInput('types',['str','num']);`

See methods in API docs: [TypedInput Widget : Node-RED](https://nodered.org/docs/api/ui/typedInput/#methods)

* * *

TBH: this is not the best use of typeInput - you may as well use a standard [HTML select-option](https://www.w3schools.com/tags/tag_option.asp) list

---

<div class="post-metadata">

**Author:** ![syedhannan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedhannan/32/72932_2.png) [@syedhannan](https://discourse.nodered.org/u/syedhannan)\
**Post date:** [12 January 2023 11:08 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/4 "2023-01-12T11:08:50Z")

</div>

Can you please point out to a node or example in **node red** which uses HTML select-option since I was not able to find any

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 January 2023 11:13 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/5 "2023-01-12T11:13:21Z")

</div>

There are lots of examples on the web (after all, the node-red nodes front end are built with HTML + JavaScript + jQuery)

Try looking [here](https://gprivate.com/62vvv) for starters

---

<div class="post-metadata">

**Author:** ![syedhannan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedhannan/32/72932_2.png) [@syedhannan](https://discourse.nodered.org/u/syedhannan)\
**Post date:** [12 January 2023 11:15 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/6 "2023-01-12T11:15:39Z")

</div>

Thanks for sharing the link

---

<div class="post-metadata">

**Author:** ![syedhannan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/syedhannan/32/72932_2.png) [@syedhannan](https://discourse.nodered.org/u/syedhannan)\
**Post date:** [12 January 2023 17:41 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/7 "2023-01-12T17:41:50Z")

</div>

I have now used html select-option and am able to gt the desired drop down.

This is the code:

```auto
                for (
                  var index = 0;
                  index < ftplist.ftpListNames.length;
                  index++
                ) {
                  $("#node-input-ftplist").append(
                    '<option value="' +
                      ftplist.ftpListNames[index] +
                      '">' +
                      ftplist.ftpListNames[index] +
                      "</option>"
                  );
                }

```

I am not sure how I can save the selected value in a default variable.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 January 2023 17:44 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/8 "2023-01-12T17:44:07Z")

</div>

You can get the selected option (using jQuery) and store its value in the node properties in the `oneditsave` handler.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 March 2023 17:44 UTC](https://discourse.nodered.org/t/how-to-re-render-a-list-in-select-tag-in-editor/73576/9 "2023-03-13T17:44:48Z")

</div>

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