# Contrib-node creation - dynamic form in node config

**URL:** <https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276>\
**Category:** General\
**Created:** [14 July 2019 20:03 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276 "2019-07-14T20:03:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 July 2019 20:03 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/1 "2019-07-14T20:03:02Z")

</div>

I'm trying to develop a contrib node where the node config dropdown values change according to the first dropdown value.  
A quick example: In dropdown No1, there is `Audi` `BMW` & `Mercedes`.  
If I select `BMW`, then dropdown No2 populates with `1 series`, `2 series` & `3 series`.  
If I select `Audi` , then dropdown No2 populate with `A3`, `A4` & `A5`. and so on...

I've googled it, and found a number of examples which use underlying php scripts, and others which don't really fit my use case. There's no mention of such in this forum, and although W3Schools covers some of the elements, I'm not sure how to pull it together.

Does anyone have a working example of how this can be achieved, or any pointers of where to start looking please.

---

<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:** [14 July 2019 21:35 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/2 "2019-07-14T21:35:47Z")

</div>

How big is the data? Would it be reasonable to store it in the js file or the html as an object like this...

```auto
var dropdownData = {
  BMW: ["series 1", "series 3"],
  Mercedes ["c class", "e class"]
}

```

You could loop through the properties of the object to fill the first dropdown then 'on' change, populate the 2nd dropdown from

```auto
let sel = dropdown1.val()
let items = dropdownData[sel]
//Now fill dropdown2 with 'items'

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 July 2019 21:50 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/3 "2019-07-14T21:50:33Z")

</div>

> [@Steve-Mcl](#):
>
> Would it be reasonable to store it in the js file or the html

Yes, it's only 5 or 6 items.

The first dropdown isn't as such a problem, using the car example again;

```auto
    <div class="form-row">
        <label for="node-input-make"><i class="fa fa-car"></i> Manufacturer</label>
        <select id="node-input-make">
            <option value="BM">BMW</option>
            <option value="AU">Audi</option>
            <option value="ME">Mercedes</option>
        </select>
    </div>

```

It's then establishing the link between the value selected in dropdown #1 and how that then influences dropdown #2...

---

<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:** [14 July 2019 22:00 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/4 "2019-07-14T22:00:29Z")

</div>

Hi Paul,

I did something similar [here](https://github.com/bartbutenaers/node-red-contrib-unit-converter/blob/master/unit-converter.html#L82). The first dropdown determines the content of the second dropdown.

The dropdown options are dynamically added via this code:

```auto
$("<option value='" + unit.abbr + "'> " + unit.singular + " (" + unit.abbr + ")</option>").appendTo("#node-input-inputUnit");

```

Hope that helps somehow ...

---

<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:** [14 July 2019 22:03 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/5 "2019-07-14T22:03:34Z")

</div>

Try using`change` event

```auto
let $dropdown1 = $("#dropdown1")
let $dropdown2 = $("#dropdown2")
$dropdown1.change(function() {
   let sel = $dropdown1.val()
   let data = dropdownData[sel]
   $dropdown2.empty()
   $.each(data, function() {
    $dropdown2.append($("<option />").val(this).text(this));
  }
});

```

It's untested (written on my phone) & off the top of my head but should get you close and give you an idea.  
}

```auto

```

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 July 2019 22:03 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/6 "2019-07-14T22:03:34Z")

</div>

> [@BartButenaers](#):
>
> I did something similar [here](https://github.com/bartbutenaers/node-red-contrib-unit-converter/blob/master/unit-converter.html#L82).

I've been looking at that node for past few days!!!  
...but found it difficult to understand the process.  
Perhaps I'm aiming too high here!

---

<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:** [14 July 2019 22:12 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/7 "2019-07-14T22:12:15Z")

</div>

No problem. Steve's code snippet is a very nice summary of what I mean...

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [14 July 2019 22:17 UTC](https://discourse.nodered.org/t/contrib-node-creation-dynamic-form-in-node-config/13276/8 "2019-07-14T22:17:08Z")

</div>

Thanks Steve & Bart

I can see the commonality between your two posts, and I'll have a look with 'fresh eyes' in the morning....