|SOLVED| Help with onChange event on dropdown

Ask the community
,
1

Hi, I am having issues with on onChange event with a dropdown. The dropdown has 3 options. Duplex, Triplex, and Fourplex. The user inputs are in groups for each choice as Unit 1, Unit 2, Unit 3, and Unit 4.

When Duplex is selected I would like Unit 1 group, and Unit 2 Group to show, and Unit 3 and 4 to collapse.

When Triplex is selected Unit 1, Unit 2, and Unit 3 groups should show and Unit 4 collapse.

When Fourplex is selected all groups show.

Here is the code I have below. Any help is greatly appreciated.

export function dropdown4_change ( event ) {
if ( $w ( ‘#dropdown4’ ). value === ‘duplex’ )
$w ( ‘#group37’ ). show ();
$w ( “#group38” ). show ();
$w ( “#group31” ). collapse ();
$w ( “#group32” ). collapse ();
if ( $w ( ‘#dropdown4’ ). value === ‘triplex’ )
$w ( ‘#group37’ ). show ();
$w ( “#group38” ). show ();
$w ( “#group31” ). show ();
$w ( “#group32” ). collapse ();
if ( $w ( ‘#dropdown4’ ). value === ‘duplex’ )
$w ( ‘#group37’ ). show ();
$w ( “#group38” ). show ();
$w ( “#group31” ). show ();
$w ( “#group32” ). show ();
}

2

The structure of your if statements is incorrect. Try this:
if ( $w ( ‘#dropdown4’ ). value === ‘duplex’ ) {
$w ( ‘#group37’ ). show ();
$w ( “#group38” ). show ();
$w ( “#group31” ). collapse ();
$w ( “#group32” ). collapse ();
} else if ( $w ( ‘#dropdown4’ ). value === ‘triplex’ ) {
$w ( ‘#group37’ ). show ();
$w ( “#group38” ). show ();
$w ( “#group31” ). show ();
$w ( “#group32” ). collapse ();
} else if ( $w ( ‘#dropdown4’ ). value === ‘duplex’ ) {
$w ( ‘#group37’ ). show ();
$w ( “#group38” ). show ();
$w ( “#group31” ). show ();
$w ( “#group32” ). show ();
}

3

Thanks for replying. Unfortunately nothing happens.

I pasted your code and it asked me for another bracket on the end. I tried with and without additional bracket. Nothing changed.

I noticed an error I pasted in my post. The last line should have been ‘fourplex’ not ‘duplex’ again. Even changing that did not work.

Any other ideas?

4

@miguelbuyme

$w.onReady(function() {console.log("Page ready!");
    $w('#dropdown4').onChange(async()=>{
        if ($w('#dropdown4').value ==='duplex') { 
            $w('#group37, #group38').expand();  
            $w('#group37, #group38').show('fade', {duration:500});
            //--------------------------------------------------------
            await $w("#group31, #group32").hide('fade', {duration:500});
            $w("#group31, #group32").collapse();            
        } 

        
        if ($w('#dropdown4').value ==='triplex') {
            $w('#group37, #group38, #group31').expand();    
            $w('#group37, #group38, #group31').show('fade', {duration:500});
            //--------------------------------------------------------
            await $w("#group32").hide('fade', {duration:500});
            $w("#group32").collapse(); 
        }
        

        if ($w('#dropdown4').value === 'fourplex') {
            $w('#group37, #group38, #group31, #group32').expand();  
            $w('#group37, #group38, #group31, #group32').show('fade', {duration:500});
        }
    });
});
5

@russian-dima

Thanks but nothing happens with this code either.

The original code works fine with just the first “if” statement. Once the “else if” statements are entered, nothing happens at all.

6

@miguelbuyme
Is there more CODE in your on your page? If so → show your whole code.

You are using → exportfunction dropdown4_change ( event ){ ← get rid of it.
Use another coding-technique. Also delete the button-connection inside the PROPERTY-PANEL!

COPY and PASTE the whole shown code to your page and run it again.

$w.onReady(function() {console.log("Page ready!");
    $w('#dropdown4').onChange(async()=>{console.log("Dropdown-Changed!");
        if ($w('#dropdown4').value === 'duplex') {console.log("DUPLEX"); 
            $w('#group37, #group38').expand();  
            $w('#group37, #group38').show('fade', {duration:500});
            //--------------------------------------------------------
            await $w("#group31, #group32").hide('fade', {duration:500});
            $w("#group31, #group32").collapse();            
        } 

        
        if ($w('#dropdown4').value === 'triplex') {console.log("TRIPLEX"); 
            $w('#group37, #group38, #group31').expand();    
            $w('#group37, #group38, #group31').show('fade', {duration:500});
            //--------------------------------------------------------
            await $w("#group32").hide('fade', {duration:500});
            $w("#group32").collapse(); 
        }
        

        if ($w('#dropdown4').value === 'fourplex') {console.log("FOURPLEX"); 
            $w('#group37, #group38, #group31, #group32').expand();  
            $w('#group37, #group38, #group31, #group32').show('fade', {duration:500});
        }
    });
});

Open the console and take a look onto the results. Which results do you get?
Screenshot?

7

Hi @miguelbuyme , Can you post your latest code? Another thing to check is that the values in dropdown4 are exactly the same as the values in the code without any capitalization.

8

@miguel.buyme
The original code works fine with just the first “if” statement.
The provided if else-solution is not right and can’t work in your case, since the code will stop after entering the first → true-value.

→ get rid of → else if → use just → if + else

This way, every if-statement will be checked!

Edit: correction → it doesn’t matter which one is used, both should work.

@robmich
Another thing to check is that the values in dropdown4 are exactly the same as the values in the code without any capitalization.

This answer from Miguel should tell us that the used values are correct…
The original code works fine…

I guess the problem will be, that Miguel did not copy and paste the whole code including → onReady()-code-part.
Using the following kind of coding-style is not the best idea …

exportfunction dropdown4_change(event){ .........}

But anyway it would be surely helpful if you would show us your current running code (in a code-block) and perhaps even the console-logs (as screenshot).

9

Thank you to everyone that replied. All you input was greatly appreciated. I figured it out. The following code works perfectly. The issue was very simple…duplex, triplex, and fourplex only needed to be capitalized (Duplex, Triplex, Fourplex). See below. Hope this helps out some other wix users. Love this community.

export function dropdown4_change ( event ) {
if ( $w ( ‘#dropdown4’ ). value === ‘Duplex’ ) {

$w ( '#group37' ). expand (); 
 $w ( "#group38" ). expand ();

}
else if
( $w ( ‘#dropdown4’ ). value === ‘Triplex’ ) {
$w ( ‘#group37’ ). expand ();
$w ( “#group38” ). expand ();
$w ( “#group31” ). expand ();

} 

**else if**  
     ( $w ( '#dropdown4' ). value === 'Fourplex' ) { 
    $w ( '#group37' ). expand (); 
 $w ( "#group38" ). expand (); 
    $w ( "#group31" ). expand (); 
    $w ( "#group32" ). expand (); 
}

}

10

@miguelbuyme
Perhaps i missunderstood your comment…

“The original code works fine with just the first “if” statement. Once the “else if” statements are entered, nothing happens at all.”

Then i ask myself, how your code could work the first time → very strange.

The important part of your original code…
if ( $w ( ‘#dropdown4’ ). value === ‘duplex’ )

Anyway, if it works for you right now, well done! :+1: