# Accesing dropdown in js file

**URL:** <https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221>\
**Category:** Developing Nodes\
**Created:** [5 May 2021 13:20 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221 "2021-05-05T13:20:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [5 May 2021 13:20 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/1 "2021-05-05T13:20:01Z")

</div>

I just have a simple question. Can i somehow access option.text in js.file. To acces options value in js file you just simply write

```auto
this.options = config. options
let node = this;
let options = node.options
options = The value of the option selected in the dropdown

```

And if i could somehow make the option in select tag selected without clicking on it.

For example something like this :

`$("#select option[value='2']").selected = "true"`

So that would be if the option in select tag has value of 2 , make it selected.

---

<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:** [6 May 2021 07:07 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/2 "2021-05-06T07:07:02Z")

</div>

> [@jake123](#):
>
> For example something like this :
> 
> `$("#select option[value='2']").selected = "true"`
> 
> So that would be if the option in select tag has value of 2 , make it selected.

As I said in other post.

#### at the HTML/Client side

You add a vaiable to the `defaults` e.g. `selectedValue`  
In oneditsave, you store selected options `value` in a variable (e.g. node.selectedValue)

#### at the Js side

you access it from node.selectedValue

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 07:37 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/3 "2021-05-06T07:37:58Z")

</div>

No no i get that, I know how to do this, i manged it . But i want to be displayed that it is selected. Everytime i open node the fetch function calls and dropdown refills . So basically everytime i do that the 1st one is selected. Now i want to make if i selected one option that it stores its data and then when i reopen the node it can be selected.

---

<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:** [6 May 2021 07:41 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/4 "2021-05-06T07:41:40Z")

</div>

Your question is "Accesing dropdown in js file"

the js file is server side.

Also, this was spelled out in the other post...

> [@Custom node with values from global](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/18):
>
> ```auto
> if(value == node.selectedValue) $('#node-input-options').attr('selected','selected'); //<<<<<
> 
> ```

---

<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:** [6 May 2021 07:43 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/5 "2021-05-06T07:43:23Z")

</div>

> [@jake123](#):
>
> No no i get that,

But your question suggests to us you aren't quite "getting it". Because to me, your question sounds identical to the one you've asked previous and that we've explained before how to use the node property to ensure the right option is selected in the list after it gets repopulated.

> Now i want to make if i selected one option that it stores its data

Yes - the selected value is stored as a node property

> then when i reopen the node it can be selected.

When the dialog reopens, your fetch runs to get the available options, then once the select box has been populated with the available options, it can use the value from the stored node property to ensure the right value has been preselected in the list.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 07:58 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/6 "2021-05-06T07:58:09Z")

</div>

I understand every part of what u said and i know how to implement most of it. Except for the code for the last thing you wrote. dont know how to make the right value selected in the list.

---

<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:** [6 May 2021 08:07 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/7 "2021-05-06T08:07:10Z")

</div>

> [@jake123](#):
>
> dont know how to make the right value selected in the list.

Did you try this...

```auto
              data.forEach((item) =>
                  let value = item.name;
                  let text = item.name;
                  options.push({ v: value, t: text, });
                  $("#node-input-options").append(
                    $("<option></option>").attr("value", value).text(text)
                  );
                  if(value == node.selectedValue) $('#node-input-options').attr('selected','selected'); //<<<<<
              );

```

What it does: as you build your `select`, if the **remembered selection** (`node.selectedValue`) matches the `value` being added to the options, set the `selected` attribute of the option being added to value `selected`.

This was pointed out [here](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/18) - did you try it?

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 08:14 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/8 "2021-05-06T08:14:07Z")

</div>

In the previous post know i see i made some mistakes so it didnt work. Now i have tried and it still doesnt work but maybe because of this.

```auto
   fetch(metaUrl)
          .then((res) => res.json())
          .then((data) => {
            data.forEach((item) => {
              options.push({
                v: item.count,
                t: item.name,
              });
            });
            for (let i = 0; i < options.length; i++) {
              let value = options[i].v;
              let text = options[i].t;
              $("#node-input-options").append(
                $("<option></option>")
                  .attr({
                    value: value,
                  })
                  .text(text)
              );
              if (text == node.selectOption)
                $("#node-input-options").attr("selected", "selected");
            }

```

i need to do it over text. =\> tried console.log(node.selectOption) and it gives back good result . Something with the if func might be off perhaps?

---

<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:** [6 May 2021 08:17 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/9 "2021-05-06T08:17:16Z")

</div>

so add a `debugger` statement just above `if (text == node.selectOption)`, restart/refresh & open devtools. Step through & inspect the values.

Does `text` ever match `node.selectOption` ?

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 08:19 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/10 "2021-05-06T08:19:54Z")

</div>

Ill add debugger now. And yes `text` matches `node.selectOption`.

---

<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:** [6 May 2021 08:22 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/11 "2021-05-06T08:22:01Z")

</div>

ahh - i know what is wrong.

```auto
            for (let i = 0; i < options.length; i++) {
              let value = options[i].v;
              let text = options[i].t;
              var opt = $("#node-input-options").append(
                 $("<option></option>")
                  .attr({
                    value: value,
                  })
                  .text(text)
              );
              if (text == node.selectOption)
                opt.attr("selected", "selected");
            }

```

try that ↑ (might work).

---

<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:** [6 May 2021 08:24 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/12 "2021-05-06T08:24:15Z")

</div>

or perhaps this...

```auto
            for (let i = 0; i < options.length; i++) {
              let value = options[i].v;
              let text = options[i].t;
              $("#node-input-options").append(
                 $("<option></option>")
                  .attr({
                    value: value,
                    selected: (text == node.selectOption ? "selected" : "")
                  })
                  .text(text)
              );
            }

```

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 08:30 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/13 "2021-05-06T08:30:44Z")

</div>

Your last post almost does it. Now it displays the selected but the problem is that no matter which i select now the text is always 3rd one and the value is selected. If u dont understand what i mean ill do a quick video about it.  
Maybe the problem is that its in a loop?  
Its like my oneditsave its not dynamic anymore.

Tried console loging the node.selectOption in oneditsave and oneditprepare and its good. Just the dropdown always has 3rd one selected

---

<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:** [6 May 2021 08:34 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/14 "2021-05-06T08:34:37Z")

</div>

try

```auto
for (let i = 0; i < options.length; i++) {
    let value = options[i].v;
    let text = options[i].t;
    let opt = $("<option></option>");
    opt.attr({ value: value});
    opt.text(text);
    if (text == node.selectOption) opt.attr("selected", "selected");
    $("#node-input-options").append(opt);
}

```

OR

```auto
for (let i = 0; i < options.length; i++) {
    let value = options[i].v;
    let text = options[i].t;
    let opt = $("<option></option>");
    opt.attr({ value: value});
    opt.text(text);
    $("#node-input-options").append(opt);
}
$("#node-input-options").val(node.selectOption);

```

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 08:36 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/15 "2021-05-06T08:36:45Z")

</div>

1st solution does it . Thank you very much!!  
Could u maybe explain why didnt it work the previous way? Its almost the same logic

---

<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:** [6 May 2021 08:41 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/16 "2021-05-06T08:41:30Z")

</div>

The 1st was always adding the `selected` attribute with a value of "selected" or ""  
The last one **only** adds the `selected` attribute if the text matches.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 08:44 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/17 "2021-05-06T08:44:14Z")

</div>

Oh I understand it now. Thank you very much!

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 10:36 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/18 "2021-05-06T10:36:08Z")

</div>

How to get all the selected values if my SELECT tag has multiple selections?

---

<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:** [6 May 2021 10:46 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/19 "2021-05-06T10:46:32Z")

</div>

> <https://stackoverflow.com/questions/11821261/how-to-get-all-selected-values-from-select-multiple-multiple>

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [6 May 2021 10:50 UTC](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221/20 "2021-05-06T10:50:27Z")

</div>

ok i get that, how to actually get them by id? I have made a loop that gives each option an id. Id i generate over fetch function.

```auto
c:item.count
let count = option[i].c
{value:value, id: count}

```

[Next page](https://discourse.nodered.org/t/accesing-dropdown-in-js-file/45221.md?page=2)