Accesing dropdown in js file

Developing Nodes
1

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

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.

2

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

3

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.

4

Your question is "Accesing dropdown in js file"

the js file is server side.

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

5

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.

6

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.

7

Did you try this...

              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 - did you try it?

8

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.

   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?

9

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 ?

10

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

11

ahh - i know what is wrong.

            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).

12

or perhaps this...

            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)
              );
            }
13

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

14

try

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

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);
15

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

16

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.

17

Oh I understand it now. Thank you very much!

18

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

19
20

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.

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