Multi state box using Dropdown

Ask the community
,
1

Hi everyone.

I have very little experience with Corvid, so I’m really struggling to pull this simple thing.

I’m trying to make a dropdown that whenever I’m choosing a year the multi-box will change accordingly and show the multi-box I assign to it.

https:// www. aleksdelab .com/publication

Thank you everyone

2

so assuming that the state names are identical to the dropdwon option values, you can do something like:

$w.onReady(() => {
$w("#dropdown").onChange(event => {
$w("#multiSatate").changeState(event.target.value );
})
})
2 Likes
3

Worked.

Thank you!

4

Hi J.D. Could you elaborate a little more on this, please. Would I need to add some other data into changeState ( event . target . value );

EG - I have a drop-down with options LNG and GAS. I then have a multi-box with 2 states called LNG and GAS. And the Box ID is Comm.

5

Oren, could you paste a copy of your code here so I can work out how you did it please.

6

@markabroad

$w.onReady(() => {
    $w("#YourDropDownIDhere").onChange(event => {
        console.log(event.target.value)
        $w("#Comm").changeState(event.target.value );
    })
})

How does it works?

You have your DropDown, let us give this dropdown the following ID —> “DD1”.
Ok, you have now defined the ID for your dropdown.
When you change the VALUES of your “DD1”(dropdown) an event is fired-up.
You can targeting this events value. And this is exacly what J.D. did in his example.

Nice solution by the way!

Next step is to take the targeted VALUE (selected in the “DD1”-dropdown) and pass it over to the “MSB” Multi-State-Box, in your project → “Comm”

So when for example you choose “LNG” in your dropdown, an onChangeEvent start his job and changes the state in your MSB to the state of the choosen dropdown-value.

To explain it more simply:
-You have 2x values in your DropDown → “LNG” + “GAS”
-And you have the corresponding 2x states in your MSB → “LNG” + “GAS”
-You change DD —> targeting-process —> “LNG” —> changing MSB-state—> “LNG”

7

So to confirm… In the text console . log ( event . target . value ) I would change value to the LNG value from the Dropdown.

And in the text $w ( “#Comm” ). changeState ( event . target . value ); I would change value to the corresponding LNG state?

8

So to confirm… In the text console . log ( event . target . value ) I would change value to the LNG value from the Dropdown.

And in the text $w ( “#Comm” ). changeState ( event . target . value ); I would change value to the corresponding LNG state?

9

@markabroad
Test this first and look into your CONSOLE! You will understand the rest.
-Paste this little code-part into your page.
-Rename the ID to corresponding to your elements-ID (blue codeline).
-Open your console (F-12 in google-chrome)
-Do a value-change in your dropdown —> an event will start.
-Take a look onto your console.

What happened ???

$w.onReady(() => {
    $w("#YourDropDownIDhere").onChange(event => {
        console.log(event.target.value)
    })
})

Expand your code …

$w.onReady(() => {
    $w("#YourDropDownIDhere").onChange(event => {
        console.log(event.target.value)
        console.log(event.target.id)
    })
})

Do some changes on your dropdown and take a look onto console again.

10

Another option which is pretty straight forward is this:

$w.onReady(() => {
$w(‘#dropdown’).onChange(() => {
let val = $w(‘#dropdown’).value;
if (val === “firstDropdownValue”) {$w(‘#stateBoxName’).changeState(“#firstMulti-StateBoxID”) }
if (val === “secondDropdownValue”) {$w(‘#stateBoxName’).changeState(“#secondMulti-StateBoxID”); }
} );
});