Dropdown list with buttons

Hi, is there ayway I can implement from a Cascading Dropdown button at the end?


Something like this, a button with every size that I can after connect to different PFD files

Hi,
I don’t understand the question. Can you elaborate?

Ok, i also did not understand completely the aim in your question.

You want to show a “PDF-file” on the choice of multiple dropdowns?

So after a cascading dropdown, a specific button will show up, connected to a PDF file or an image.
So if the client choose he wants a women’s shirt size M, a button with “Size M Template” will show up, and if a client choose a man’s shirt size XL, a button with “Size XL Template” will show up.
Those buttons must be connected to different files, so exactly what the client choose will appear on the exact button.

Hi Rebeca you need to create separate buttons one named M, another named XL etc, set them all to be collapsed except one. connect each button to a different pdf file via a dataset then add an onChange event to your dropdown, then use code similar to this but you will need to edit it to suit your page

let key = $w( “#dropdown1” ).value;
if (key === ( ‘M’ ))$w( “#myButton1” ).expand()

else {

        $w( "#myButton1" ).collapse(), 

        console.log(key) 
    } 

if (key === ( ‘L’ ))$w( “#myButton2” ).expand()

else {

        $w( "#myButton2" ).collapse(), 

        console.log(key) 
    } 

if (key === ( ‘XL’ ))$w( “#myButton3” ).expand()

else {

        $w( "#myButton3" ).collapse(), 

        console.log(key) 
    } 

if (key === ( ‘S’ ))$w( “#myButton4” ).expand()

else {

        $w( "#myButton4" ).collapse(), 

        console.log(key) 
    } 

}

1 Like

Take a look onto this very simple examples…
https://russian-dima.wixsite.com/meinewebsite/website-navigation

This could be, what you are searching for…

var myButtonLabel
var myDataset = "PlaceHereTheIDofYourDataset"
 
$w.onReady(()=>{
    $w('#myDropdown1').onChange(()=>{
        myButtonLabel = myButtonLabel+$w('#myDropdown1').value
        console.log(myButtonLabel)
        $w('#myButton').label = myButtonLabel
        $w('#myButton').link = $w(myDataset).getCurrentItem().XXX
    })
    
    $w('#myDropdown2').onChange(()=>{
        myButtonLabel = myButtonLabel+$w('#myDropdown2').value
        console.log(myButtonLabel)
        $w('#myButton').label = myButtonLabel
        $w('#myButton').link = $w(myDataset).getCurrentItem().XXX
    })
    
    $w('#myDropdown3').onChange(()=>{
        myButtonLabel = myButtonLabel+$w('#myDropdown3').value
        console.log(myButtonLabel)
        $w('#myButton').label = myButtonLabel
        $w('#myButton').link = $w(myDataset).getCurrentItem().XXX
    })
})

How it works?

-on every changement of one of the dropdowns, the label of your BUTTON changes, corresponding to the VALUE of the selected DropDown. And also “button-LINK” can be changed and connected to the button this way.

Good luck and happy coding. :wink: :blossom:

1 Like

@russian-dima Thank you, I think this will work but I’m kinda new so I don’t really know how to make it work
So for this specific code I have 3 dropdowns and 1 button?
And the dropdowns and the button must be connected to a dataset? I mean where in code appears :myDataset, I have to put the name of my dataset from where I have the links that I want to appear on the button?

@rebecarpop

So for this specific code I have 3 dropdowns and 1 button? —> CORRECT!
It depends if you do use → dynamic-pages?
It depends also on the structure of your database (collection).
Do you use a database, where you store allt the informations?

You will have to create a DATABASE first, to use this method!

DATABASE-EXAMPLE (based on your message)…

So after a cascading dropdown, a specific button will show up, connected to a PDF file or an image. 
So if the client choose he wants a women's shirt size M, a button with "Size M Template" will show up, and if a client choose a man's shirt size XL, a button with "Size XL Template" will show up.
Those buttons must be connected to different files, so exactly what the client choose will appear on the exact button.

Your virtual-database…

–title -------- type ---- size -------- file-url --------


shirt-1 — woman — S — https://file-URL-1
shirt-2 ----- man ----- S — https://file-URL-2
shirt-3 — woman — S — https://file-URL-3
shirt-4 — woman — S — https://file-URL-4
shirt-5 ----- man ----- S — https://file-URL-5
shirt-6 — woman — S — https://file-URL-6
shirt-7 ----- man ------ S — https://file-URL-7

  1. Connecting your DATASET to the created (new) DATABASE.
  2. Entering the ID of your new DATASET (“dataset1” for example) into the code…
var myDataset ="PlaceHereTheIDofYourDataset"
  1. Creating 3x Dropdowns on the page (attention on the ID !!! )

  2. Creating 1x Button on your page (attention on the ID !!! )

  3. Inputting the code to the current page (first activate Dev-Mode).

  4. Searching for Dev-Mode-Info here in the forum, if do not know what it is :grin:

  5. Now taking some time and try to understand all the steps first.

  6. Try to solve the rest on your own :stuck_out_tongue_winking_eye:

  7. Send me a —> :blossom: if you need more help :rofl:

Good luck and happy coding.

1 Like

@millwards322 Hi, thank you!
Could you please give the code for the onChange event to the dropdown?

@rebecarpop Hi no problem, you will need 3 dropdowns if you are filtering sizes by men and women, like this

export function dropdown1_change(event) {

 let key = $w("#dropdown1women").value;
 if (key === ('M'))$w("#myButton1Women").expand()

 
else {
 
            $w("#myButton1Women").collapse(),
 
            console.log(key)
        }

if (key === ('L'))$w("#myButton2Women").expand()

 
else {
 
            $w("#myButton2Women").collapse(),
 
            console.log(key)
        }

 if (key === ('XL'))$w("#myButton3Women").expand()

 
else {
 
            $w("#myButton3Women").collapse(),
 
            console.log(key)
        }

 if (key === ('S'))$w("#myButton4Women").expand()

 
else {
 
            $w("#myButton4Women").collapse(),
 
            console.log(key)
        }

}

export function dropdown2_change(event) {

let key = $w("#dropdown2").value;
 if (key === ('Men'))$w("#dropdown3men").expand(),
$w("#myButton1Men").expand(),
$w("#myButton1Women").collapse(),
$w("#myButton2Women").collapse(),
$w("#myButton3Women").collapse(),
$w("#myButton4Women").collapse()
 
else {
 
            $w("#dropdown3men").collapse(),
            $w("#myButton1Men").collapse(),
            $w("#myButton4Men").collapse(),
            $w("#myButton3Men").collapse(),
            $w("#myButton2Men").collapse(),
            $w("#myButton1Women").expand()
 
            console.log(key)
        }

if (key === ('Women'))$w("#dropdown1women").expand()

 
else {
 
            $w("#dropdown1women").collapse(),
 
            console.log(key)
        }
}

export function dropdown3men_change(event) {
let key = $w("#dropdown3men").value;
 if (key === ('M'))$w("#myButton1Men").expand()

 
else {
 
            $w("#myButton1Men").collapse(),
 
            console.log(key)
        }

if (key === ('L'))$w("#myButton2Men").expand()

 
else {
 
            $w("#myButton2Men").collapse(),
 
            console.log(key)
        }

 if (key === ('XL'))$w("#myButton3Men").expand()

 
else {
 
            $w("#myButton3Men").collapse(),
 
            console.log(key)
        }

 if (key === ('S'))$w("#myButton4Men").expand()

 
else {
 
            $w("#myButton4Men").collapse(),
 
            console.log(key)
        }
}


add the onChange() event on the dropdown


add the onChange() event on the dropdown


add the onChange() event on the dropdown

1 Like