# How to set \<select\> dropdown in oneditprepare?

**URL:** <https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016>\
**Category:** Developing Nodes\
**Created:** [28 March 2023 11:25 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016 "2023-03-28T11:25:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [28 March 2023 11:25 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/1 "2023-03-28T11:25:22Z")

</div>

I have something like this in the definition of the edit screen and the commented option (`value="emit"`) was there in a previous version but is gone now.  
I would like to "migrate" the existing value `"emit"` to `"drop"` and set another checkbox.  
While I was able to set the checkbox (`$("#node-input-emit_msg_2nd").prop('checked', true);`), I am unable to get the `<select>` dropbox filled in a way that the edit screen does not open empty.

```auto
<script type="text/html" data-template-name="rate-limiter">
    <div class="form-row">
        <select id="node-input-drop_select" style="width: 70%">
            <option value="queue" data-i18n="rate-limiter.queuemsg"></option>
            <option value="drop" data-i18n="rate-limiter.dropmsg"></option>
            <!--
            <option value="emit" data-i18n="rate-limiter.sendmsg"></option>
            -->
        </select>
    </div>
</script>

```

1. I tried `$("#node-input-drop_select").val('drop')`, but that seems to do nothing (at least nothing noticabe).

2. Setting `this.drop_select = "drop"` does not help immediately, but only after hitting cancel on the edit dialog the first time and on the second time opening the dialog the dropdown is filled.

3. On [jquery - Set select option 'selected', by value - Stack Overflow](https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value) and [drop down menu - How can I set the value of a DropDownList using jQuery? - Stack Overflow](https://stackoverflow.com/questions/292615/how-can-i-set-the-value-of-a-dropdownlist-using-jquery) I found some other flavours... which did not work... e.g.

**What would be the correct and working way to solve this?**

* * *

I am somehow missing a location to put code that runs after a node is updated, to get everything in order to match the new functionality, before the editor get's opened the first time. For the js file of the node it is not an issue, because I just put "migration" stuff at the beginning, but for the editor? Am I missing something?

If there is no way to do it properly, I was thinking to abuse the label function, because it seems to me, that it is the only safe place to put code that is called for every node upon initialisation. But does it get called if the node-red only starts without the editor opened in the browser?  
And probably it is not the best way to do this, right?

```auto
   label: function() {
       // using this to set value for all
       if (this.drop_select === "emit") {
           this.drop_select = "drop";
           this.checkbox = true;
       }

       // actually determine label
       if (this.name) {
           return this.name;
       } else {
           return "rate-limiter";
       }
   },

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 March 2023 11:50 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/2 "2023-03-28T11:50:02Z")

</div>

Hi @cameo69

Try setting the `selected` property to `true`, instead of the attribute, jquery will 'redraw' using this method I believe

Ensure this happens in `oneditprepare`  
I think you may also need to put the value in single quotes - I'm not sure

```auto
$("#node-input-drop_select option[value='drop']").prop('selected', true);

```

**EDIT**  
In fact, I would do this after a quick delay, this allows the runtime to first do its thing - effectively setting a value that is no longer valid.

```auto
setTimeout(() => {
    $("#node-input-drop_select option[value='drop']").prop('selected', true);
}, 50)

```

Ideally this should be noted as a breaking change instead of hackery - that needs to be documented 😉

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 March 2023 12:11 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/3 "2023-03-28T12:11:39Z")

</div>

> [@marcus-j-davies](#):
>
> I think you may also need to put the value in single quotes - I'm not sure

Personally, I prefer to use single-quotes for JavaScript strings which leaves double-quotes for shell and HTML quotes. Either way, you either have to use the oposite quote type or escape the quote  
`"<... xxx=\"yyy\">"`.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 March 2023 12:14 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/4 "2023-03-28T12:14:07Z")

</div>

Yup - I'm a single type of person also, My eslint configs shout at me if not! 😅

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 March 2023 12:15 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/5 "2023-03-28T12:15:41Z")

</div>

Man after my own heart! 😁

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [28 March 2023 12:50 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/6 "2023-03-28T12:50:20Z")

</div>

> [@marcus-j-davies](#):
>
> `$("#node-input-drop_select option[value='drop']").prop('selected', true);`

This worked, with and without the timeout.

Is there an advantage of allowing _"the runtime to first do its thing - effectively setting a value that is no longer valid."_?

Right now this whole fiddling with HTML of the edit screen is taking way more time than I anticipated. 😑

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 March 2023 13:00 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/7 "2023-03-28T13:00:47Z")

</div>

> [@cameo69](#):
>
> Is there an advantage of allowing _"the runtime to first do its thing - effectively setting a value that is no longer valid."_?

None - based on the fact it worked without the timeout.

I'm not 100% sure, I can't recall if `oneditprepare` is executed before the runtime loads values, hence the delayed action just in case - but seems its not needed .

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 March 2023 13:06 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/8 "2023-03-28T13:06:57Z")

</div>

@knolleary

Out of curiosity, at what point in the stack is `oneditprepare` and `oneditsave` called - is it after values have been fetched/committed and applied to/from the elements or after?

---

<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:** [28 March 2023 13:09 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/9 "2023-03-28T13:09:49Z")

</div>

> [@marcus-j-davies](#):
>
> at what point in the stack is `oneditprepare` and `oneditsave` called - is it after values have been fetched/committed and applied to/from the elements or after?

`oneditprepare` is called _before_ any values are set on the inputs... because the inputs might not exist until after `oneditprepare` has been called.

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [28 March 2023 13:11 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/10 "2023-03-28T13:11:23Z")

</div>

> [@marcus-j-davies](#):
>
> if `oneditprepare` is executed before the runtime loads values

Given the fact that I tried in `oneditprepare`...

> [@cameo69](#):
>
> Setting `this.drop_select = "drop"` does not help immediately, but only after hitting cancel on the edit dialog the first time and on the second time opening the dialog the dropdown is filled.

...seems to me like `oneditprepare` is called after loading values.

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [28 March 2023 13:18 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/11 "2023-03-28T13:18:10Z")

</div>

> [@knolleary](#):
>
> `oneditprepare` is called _before_ any values are set on the inputs...

I don't understand.  
If I set in `oneditprepare` the selected item of a dropbox and that happened "_before_ any values are set on the inputs"; wouldn't that mean that my set value should be overwritten by said "set on inputs"?

---

<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:** [29 March 2023 06:10 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/12 "2023-03-29T06:10:47Z")

</div>

> [@cameo69](#):
>
> I am unable to get the `<select>` dropbox filled in a way that the edit screen does not open empty.

> [@cameo69](#):
>
> I am somehow missing a location to put code that runs after a node is updated, to get everything in order to match the new functionality

If I read this correctly, your issue may be a bit different (and less difficult) than you think. If you edit the html file to add new properties to the node configuration and restart NR, the editor will import the most recently deployed flow file, and any new properties will be undefined. This could cause the default selection in the dropdown to be blank (as well as other fields in the edit dialog). Making a selection and deploying fixes this. You can confirm that this is happening by dragging a new instance of your node into the workspace and opening its edit dialog. Everything should be ok in the new instance. If you are developing a new node, you can ignore the issue as long as you don't let it bother you during testing. If you are updating a node that has already been published, you might warn your users or just count on them to re-deploy flows containing the updated node. It may not be worth the effort to resolve what is basically a one-time glitch.

If I have completely missed the point here, please ignore the above and excuse me for taking your time.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 March 2023 09:37 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/13 "2023-03-29T09:37:09Z")

</div>

Or better still, at the start of your on edit function, check whether the variable is populated and if not, use jQuery to set it to the default.

---

<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:** [29 March 2023 12:06 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/14 "2023-03-29T12:06:54Z")

</div>

Yes, assuming that my diagnosis is correct. Still, it seems a bit of bother to write code that will execute at most once in the lifetime of an an instance, in order to guard against a cosmetic issue. Also, treating certain parameters differently than the rest, depending on when they were introduced during development, doesn't appeal to the perfectionist in me. (Although I admit to having done this in the js file in similar situations.) So, of course, the obsessive-compulsive isn't quite sure where to come down on this...

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [29 March 2023 13:04 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/15 "2023-03-29T13:04:09Z")

</div>

I did as @TotallyInformation said (to some degree).  
In cases that I deemed relevant, I checked for `typeof attribute == "undefined"` and if true set a proper value.

I think my struggle was with the jquery and how to set the desired values. I think I would have liked it better to just set a normal attribute of the node before the user used the edit screen.

If it is necessary, well, I don't know. And you made a good point in writing code that run's only once.

However, if I update a node it should behave the same if possible or if not possible tell me about it. But silently doing something different is not a good option in my book. So to work the same for some settings, I had to correct values.

Besides, I am still booking this under "learning experience". 🙂

BTW, just published a new version.

---

<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:** [29 March 2023 13:07 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/16 "2023-03-29T13:07:57Z")

</div>

> [@cameo69](#):
>
> BTW, just published a new version.

What node is this? I may have missed where you identified it.

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [29 March 2023 13:12 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/17 "2023-03-29T13:12:26Z")

</div>

> [@drmibell](#):
>
> What node is this? I may have missed where you identified it.

> **[@cameo69/node-red-ratelimit](https://flows.nodered.org/node/@cameo69/node-red-ratelimit)**
>
> implements rate limit with sliding window

- 0.0.13 (2023-03-29)
  - added max queue size
  - added queueing modes a) drop oldest message and b) drop new messages
  - added option to emit dropped messages on 2nd output also for queueing modes
  - removed mode "Send intermediate messages on 2nd output", because it can be set via Drop intermediate messages + new checkbox to emit on 2nd output

---

<div class="post-metadata">

**Author:** ![ebarrieau](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@ebarrieau](https://discourse.nodered.org/u/ebarrieau)\
**Post date:** [31 March 2023 00:41 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/18 "2023-03-31T00:41:24Z")

</div>

I realize that I am late to the party, but you can also call:

```auto
$("#node-input-drop_select").val("drop").trigger("change")

```

I have a property in one of my nodes that populates the select drop down in oneditprepare and I had to use this method to get the value to actually load by:

```auto
$("#node-input-drop_select").val(this.drop_select).trigger("change")

```

Which reads the current setting from the node config and changes the select box to that setting.

---

<div class="post-metadata">

**Author:** ![cameo69](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cameo69/32/66593_2.png) [@cameo69](https://discourse.nodered.org/u/cameo69)\
**Post date:** [31 March 2023 14:00 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/19 "2023-03-31T14:00:50Z")

</div>

> [@ebarrieau](#):
>
> `$("#node-input-drop_select").val("drop").trigger("change")`

Triggering "change" event is a nice idea and works even before I defined `$("#node-input-drop_select").on("change", function() {...`; how is that possible?

---

<div class="post-metadata">

**Author:** ![ebarrieau](https://avatars.discourse-cdn.com/v4/letter/e/8c91f0/32.png) [@ebarrieau](https://discourse.nodered.org/u/ebarrieau)\
**Post date:** [31 March 2023 14:41 UTC](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016/20 "2023-03-31T14:41:17Z")

</div>

> [@cameo69](#):
>
> Triggering "change" event is a nice idea and works even before I defined `$("#node-input-drop_select").on("change", function() {...`; how is that possible?

Change is a standard event on the input select block - triggering the change event sets the "selected" property and also triggers the event to say that it is changed. For that reason, triggering change is nice specifically because the other events happen automatically and update the display of the input.

If you have a custom handler that listens to the "change" event I am not sure how it could trigger that before it is registered. What are you doing inside your function that listens to the change event?

[Next page](https://discourse.nodered.org/t/how-to-set-select-dropdown-in-oneditprepare/77016.md?page=2)