Contrib-node creation - dynamic form in node config

General
1

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.

2

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

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

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

Yes, it's only 5 or 6 items.

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

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

4

Hi Paul,

I did something similar here. The first dropdown determines the content of the second dropdown.

The dropdown options are dynamically added via this code:

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

Hope that helps somehow ...

5

Try usingchange event

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

6

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!

7

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

8

Thanks Steve & Bart

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

1 Like